react/fcprops

Creates a React Functional Component with dedicated props type.

Usage

npx @lukasbach/scripts react/fcprops

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

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

There is a default shortcut for this script: ldo fcp

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 with dedicated props type. */

const componentName = await ask.text("_", "React component name", "MyComponent");
const pascalName = utils.changeCase.pascalCase(componentName);
const content = utils.noindent(`
  import { FC } from "react";

  type ${pascalName}Props = {};
  
  export const ${pascalName}: FC<${pascalName}Props> = ({}) => {
    return (
      <>
        hello
      </>
    );
  };
  `);

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