Quickly Generate Template-Based Code Files with Plop

I want to share with you Plop, a library that can save you time and improve your development efficiency. Plop is a code generation tool that allows you to create templates to quickly generate repetitive code.

Example: Creating a React Component

Let’s look at a simple example: creating a new React component in its own directory, with a CSS file and an index.ts file that exports it. The component will include a div with a className based on the component’s name and accept props.

Step 1: Installing Plop

First, install Plop:

npm install --save-dev plop        

Step 2: Creating the Plopfile

Create a plopfile.mjs (ESM format):

import { definePlop } from 'plop';

export default function (plop) {
  plop.setGenerator('component', {
    description: 'Create a new component',
    prompts: [
      {
        type: 'input',
        name: 'name',
        message: 'Component name:',
      },
    ],
    actions: [
      {
        type: 'add',
        path: 'src/components/{{kebabCase name}}/{{kebabCase name}}.tsx',
        templateFile: 'plop-templates/Component.tsx.hbs',
      },
      {
        type: 'add',
        path: 'src/components/{{kebabCase name}}/{{kebabCase name}}.css',
        templateFile: 'plop-templates/Component.css.hbs',
      },
      {
        type: 'add',
        path: 'src/components/{{kebabCase name}}/index.ts',
        templateFile: 'plop-templates/index.ts.hbs',
      },
    ],
  });
}        

Step 3: Creating the Templates

Create templates for the component, CSS file, and index.ts file.

? plop-templates/Component.tsx.hbs:

import './{{kebabCase name}}.css';

export const {{pascalCase name}} = (...props) => {
  return (
    <div className="{{kebabCase name}}">
    </div>
  );
};        

? plop-templates/Component.css.hbs:

.{{kebabCase name}} {
  /* Add your styles here */
}        

? plop-templates/index.ts.hbs:

export * from './{{kebabCase name}}';        

Step 4: Generating a New Component

Now, to create a new component, run the following command in your terminal:

npx plop component        

Answer the prompt: “Component name:”

For example, if you choose the name ExampleComponent, Plop will generate the following structure:

? example-component/example-component.tsx:

import './example-component.css';

export const ExampleComponent = (...props) => {
  return (
    <div className="example-component">
    </div>
  );
};        

? example-component/example-component.css:

.example-component {
  /* Add your styles here */
}        

? example-component/index.ts:

export * from './example-component';        

In Summary

Plop is a fantastic tool that can save you a lot of time and prevent mistakes in repetitive code. Whether you are developing in React or any other technology, I highly recommend trying Plop and seeing how it can improve your workflow.