react/forwardref

Creates a React Functional Component using forwardRef.

Usage

npx @lukasbach/scripts react/forwardref

You can call the script directly if you have installed it globally:

npm i -g @lukasbach/scripts
ldo react/forwardref

There is a default shortcut for this script: ldo fref

You can customize shortcuts with ldo edit-shortcuts.

Arguments

• [0]: React component name

Options

• -v, --verbose: Verbose logging

You can also omit options, and will be asked for them interactively.

Add --yes to skip all confirmations.

Script source

View Source on GitHub

/** Creates a React Functional Component using forwardRef. */

const componentName = await ask.text("_", "React component name", "MyComponent");
const pascalName = utils.changeCase.pascalCase(componentName);
const content = utils.noindent(`
  import { forwardRef } from "react";
  
  type ${pascalName}Props = {};
  
  export const ${pascalName} = forwardRef<HTMLDivElement, ${pascalName}Props>(({}, ref) => {
    return (
      <div ref={ref}>
        hello
      </div>
    );
  }
  `);

await fs.writeFile(path.join(process.cwd(), `${utils.changeCase.kebabCase(componentName)}.tsx`), content);