R-Factor

R-Factor

React & Redux Refactoring Tools

Atom
Atom
Sublime Text 3
Sublime Text 3
VSCode
VSCode

React refactorings

Add className

Adds className prop to a component and applies it to its root JSX element. Uses classNames if necessary.

Convert SVG to component

Turns an SVG into a React component.

Convert to arrow component

Turns a component into a functional component defined as an arrow function.

Convert to function component

Turns a component into a functional component defined as a function.

Convert to class component

Turns a functional component into a class component.

Generate propTypes

Adds missing propTypes definitions for every prop used in a component.

Move defaultProps & propTypes out of class

Converts static defaultProps & propTypes definitions into class property assignments below the class component definition (if present).

Move defaultProps & propTypes to class

Converts defaultProps & propTypes class property assignments into static property definitions in a class component (if present).

Toggle component type

Turns your component to either class or functional component of type defined in settings.

Toggle withRouter HOC

Either unwraps or wraps your component with withRouter from react-router-dom.

Redux refactorings

Connect

Connects a component to the redux store with both mapStateToProps & mapDispatchToProps generated.

Connect mapDispatchToProps

Connects a component to the redux store and generates mapDispatchToProps only.

Connect mapStateToProps

Connects a component to the redux store and generates mapStateToProps only.

Connect mergeProps

Connects a component to the redux store and generates mergeProps only.

Disconnect

Disconnects a component from redux store and removes all mapStateToProps, mapDispatchToProps & mergeProps.

Disconnect mapDispatchToProps

Disconnects mapDispatchToProps from a component connected to a redux store. Disconnects completely if possible.

Disconnect mapStateToProps

Disconnects mapStateToProps from a component connected to a redux store. Disconnects completely if possible.

Disconnect mergeProps

Disconnects mergeProps from a component connected to a redux store. Disconnects completely if possible.

Other refactorings

Sort attributes in objects

Sorts attributes of every object literal in a selection alphabetically. Attributes prefixed with on will appear at the end.

Sort imports

Sorts import statements according to an order defined in settings. You can choose an alphabetic order or specify a fixed order.

Configuration

Component name collision pattern

How should a component be named if name collision occurs during refactoring.

Component superclass

Which superclass to use when converting a functional component to a class component.

Custom mapDispatchToProps name

Custom name for mapDispatchToProps identifier used when connecting a component to the redux store.

Custom mapStateToProps name

Custom name for mapStateToProps identifier used when connecting a component to the redux store.

Custom mergeProps name

Custom name for mergeProps identifier used when connecting a component to the redux store.

Default component name

How should an unnamed component be named if it needs to be wrapped with a HOC.

Default HOC component name

How should an unnamed HOC component be named if it needs to be wrapped with another HOC.

End of line

End-of-line character(s).

Functional component type

Which functional component notation to use when toggling component type.

Indent

Indent characters(s).

Modules order

What order to use when sorting imports.

Node binary path

Path to node.js binary. Useful only in Sublime Text 3.

Quotes

Which quotation marks to use for strings.

Semicolons

Some people like ASI and some don't.

SVG component type

Which type of component should be generated by Convert SVG to component.

Trailing commas

Affects multi-line statements only.

Use mapDispatchToProps shorthand

Which variant of mapDispatchToProps notation to use.

Supported systems

Windows
Windows
Linux
Linux
macOS
macOS

Supported editors

Atom
Atom
Sublime Text 3
Sublime Text 3
VSCode
VSCode

Requirements

Node.js
Node.js >= 6.x.x
© 2018 - 2019 Kamil Mielnik & Yuriy Yakym. All rights reserved.