Plop templates for javascript, typescript and react.
Plop is a CLI tool for generating code from templates for a faster development workflow. This project is a common set up templates so I can keep things consistent and speed up development when I am woking on personal projects.
This is an example for a basic plopfile.js
in the root of your project
const reactComponent = require("@adeattwood/plop-files/react-component-ts");
const reactDir = "./src";
module.exports = function main(plop) {
reactComponent(plop, { componentsDir: `./${reactDir}/components` });
};
A list of all the templates available along with all the files created and options you can use to customise the templates
A react component in typescript with a test and scss module for styling
/{{group}}/{{name}}.tsx
/{{group}}/{{name}}.test.tsx
/{{group}}/{{name}}.module.scss
Option | Description |
---|---|
componentsDir |
The directory where all of your component will be created |
A react component in javascript with a test and scss module for styling
/{{group}}/{{name}}.{js,jsx}
/{{group}}/{{name}}.test.{js,jsx}
/{{group}}/{{name}}.module.scss
Option | Description |
---|---|
componentsDir |
The directory where all of your component will be created |
fileExtension |
The file extension that will be used in the javascript files. The default is jsx |
A react context file in typescript
/{{name}}.tsx
Option | Description |
---|---|
contextDir |
The directory where all of your contexts will be created |
A react context file in javascript
/{{name}}.{js,jsx}
Option | Description |
---|---|
contextDir |
The directory where all of your contexts will be created |
fileExtension |
The file extension that will be used in the javascript files. The default is jsx |
A react hook file in javascript
/use-{{name}}.js
Option | Description |
---|---|
hooksDir |
The directory where all of your hooks will be created |
A react hook file in typescript
/use-{{name}}.ts
Option | Description |
---|---|
hooksDir |
The directory where all of your hooks will be created |
A Next JS page in typescript with test files and scss module styles file. This creates pages with a .pages.ts
extension and requests the pageExtensions
prop to be changed in the next.config.js
so you can keep pages files and test files together.
...
pageExtensions: ['page.tsx', 'page.ts'],
...
/{{path}}/{{name}}.page.tsx
/{{path}}/{{name}}.test.tsx
/{{path}}/{{name}}.module.scss
Option | Description |
---|---|
pagesDir |
The directory where all of your pages will be created |