Getting Started
Install the plugin, wire it into Flat Config, and run the first autofix pass in minutes.
ESLint PluginReact Codemod
Turn repetitive React refactors into lightweight codemods.
Skip to content
Examples
Wrap inline JSX values
tsx
import { Modal } from "./Modal";
function Demo(props: { text: string; backgroundColor: string }) {
return (
<Modal
info={{ size: 10, backgroundColor: props.backgroundColor }}
onClick={() => {
console.log(props.text);
}}
/>
);
}tsx
import { Modal } from "./Modal";
import { useCallback, useMemo } from "react";
function Demo(props: { text: string; backgroundColor: string }) {
const modalInfo = useMemo(
() => ({ size: 10, backgroundColor: props.backgroundColor }),
[props.backgroundColor],
);
const handleModalClick = useCallback(() => {
console.log(props.text);
}, [props.text, props]);
return <Modal info={modalInfo} onClick={handleModalClick} />;
}Create missing hooks
tsx
import { Dialog } from "./Dialog";
const Demo = () => <Dialog ref={dialogRef} width={setWidth} />;tsx
import { Dialog, type DialogAPI } from "./Dialog";
import { useRef, useState } from "react";
const Demo = () => {
const dialogRef = useRef<DialogAPI>(null);
const [width, setWidth] = useState<Parameters<typeof Dialog>[0]["width"] | null>(null);
return <Dialog ref={dialogRef} width={setWidth} />;
};More examples are available in Examples.