DEV Community

Create react components at the speed of light with Plop.js

Ivan on January 09, 2022

So you are working in your React app, and it comes the time to create a new component, you already have your ritual down. Go to the components fold...

Read full post

Amir Sohel • Jan 10 '22

this is great ! can we add import same route in router file also?

Ivan • Jan 10 '22

Yeah you can append code to existing file with append action. Something like this

      {
        // Action type 'append' injects a template into an existing file
        type: 'append',
        path: 'src/routes/index.js',
        // Pattern tells plop where in the file to inject the template
        pattern: `/* PLOP_INJECT_IMPORT */`,
        template: `import {{pascalCase name}} from './{{pascalCase name}}';`,
      },

Amir Sohel • Jan 10 '22

but also we need to create router :(

Amir Sohel • Jan 10 '22

your linkedin? how can we connect

Ivan • Jan 11 '22

yeah, let's talk on twitter

Taras Gordienko • Jan 11 '22 • Edited

Great! How can I add a dynamic path for files instead of the default src/components/?

Ivan • Jan 11 '22 • Edited

Thank you!
You can change the path of the action to whatever you want, for example

path: "src/routes/{{pascalCase name}}/.tsx",

or a dynamic value from the prompts

path: "{{path}}/{{pascalCase name}}/.tsx",

Nabil SLITI • Oct 22 '23

Great, and currently there is a package which is based on plop and preconfigured to create components in react, angular, vue and stencil. npmjs.com/package/plop-gen
Create any component and you can rename it and you can choose where you want to create it.
Good luck

Kepobanget • Jan 12 '22

Thanks

Ivan • Jan 12 '22

You're welcome!

Rohil • Jan 9 '22

Great article ivan.

Ivan • Jan 9 '22

Thanks Rohil!