@putout/plugin-react-hooks NPM

@putout/plugin-react-hooks

🐊Putout plugin adds ability to convert class components to react hooks. Not bundled.

Install

npm i putout @putout/plugin-react-hooks -D

Add .putout.json with:

{
    "plugins": ["react-hooks"]
}

Rules

Here is list of rules:

{
    "rules": {
        "react-hooks/apply-short-fragment": "on",
        "react-hooks/declare": "on",
        "react-hooks/rename-method-under-score": "on",
        "react-hooks/convert-state-to-hooks": "on",
        "react-hooks/remove-bind": "on",
        "react-hooks/remove-this": "on",
        "react-hooks/remove-react": "on",
        "react-hooks/convert-class-to-function": "on",
        "react-hooks/convert-component-to-use-state": "on",
        "react-hooks/convert-import-component-to-use-state": "on"
    }
}

apply-short-fragment

Apply shorthand syntax of Fragment. Check out in 🐊Putout Editor.

❌ Example of incorrect code

function Columns() {
    return (
        <Fragment>
            <td>Hello</td>
            <td>World</td>
        </Fragment>
    );
}

✅ Example of correct code

function Columns() {
    return (
        <>
            <td>Hello</td>
            <td>World</td>
        </>
    );
}

Comparison

Linter	Rule	Fix
🐊 Putout	`react-hooks/apply-short-fragment`	✅
⏣ ESLint	`react/jsx-fragments`	✅

declare

Declare hooks according to Hooks API Reference.

❌ Example of incorrect code

function Example() {
    const [count, setCount] = useState(0);
    
    return (
        <div/>
    );
}

✅ Example of correct code

import {useState} from 'react';

function Example() {
    const [count, setCount] = useState(0);
    
    return (
        <div/>
    );
}

remove-react

Remove import of React in a similar to react-codemod way.

❌ Example of incorrect code

import React, {useState} from 'react';

✅ Example of correct code

import {useState} from 'react';

Example

Consider example using class:

import React, {Component} from 'react';

export default class Button extends Component {
    constructor() {
        super();
        
        this.state = {
            enabled: true,
        };
        
        this.toggle = this._toggle.bind(this);
    }
    
    _toggle() {
        this.setState({
            enabled: false,
        });
    }
    
    render() {
        const {enabled} = this.state;
        
        return (
            <button
                enabled={enabled}
                onClick={this.toggle}
            />
        );
    }
}

After putout --fix transform, you will receive:

import React, {useState} from 'react';

export default function Button() {
    const [enabled, setEnabled] = useState(true);
    
    function toggle() {
        setEnabled(false);
    }
    
    return (
        <button
            enabled={enabled}
            onClick={toggle}
        />
    );
}