|
| 1 | +# React Codegen CLI |
| 2 | + |
| 3 | +React Codegen is a development tool to quickly generate React components. |
| 4 | +It helps you to speed up productivity in React projects and stop copying, pasting files |
| 5 | + |
| 6 | +## Installation |
| 7 | + |
| 8 | +To install the latest version run this command: |
| 9 | + |
| 10 | +```sh |
| 11 | +npm install generate-react-code --save-dev |
| 12 | +``` |
| 13 | + |
| 14 | +Then add the following script to your `packages.json` file: |
| 15 | +```json |
| 16 | +{ |
| 17 | + "scripts": { |
| 18 | + "react-codegen": "react-codegen" |
| 19 | + } |
| 20 | +} |
| 21 | +``` |
| 22 | + |
| 23 | +## Get started |
| 24 | + |
| 25 | +`react-codegen` will look for a [configuration file](#configration-file) in root folder and use it if available. |
| 26 | +If no config file is found it will fallback to a default configuration. |
| 27 | + |
| 28 | +The following command can be used to generate code: |
| 29 | +```sh |
| 30 | +npm run react-codegen |
| 31 | +``` |
| 32 | + |
| 33 | +After running the command in the terminal, |
| 34 | +you can enter the name of the component and configure the generation of the files. |
| 35 | +When creating a react component, you are given the choice to modificate the component parts, |
| 36 | +such as connecting the `useState`, `useEffect`, `propTypes` and so on. |
| 37 | + |
| 38 | + |
| 39 | + |
| 40 | +## Configration file |
| 41 | + |
| 42 | +Use `JSON` file to specify configuration information. This should be in the form of `react-codegen.json`. |
| 43 | + |
| 44 | +| Type | Value | Default | Description | |
| 45 | +|:------------:|:------------------------------------------------------------:|:--------------:|----------------------------------------------------------------------| |
| 46 | +| styles | string | scss | Extension for style file | |
| 47 | +| typescript | boolean | false | Generate typescript files | |
| 48 | +| jsxExt | boolean | true | Use `jsx` extension for components | |
| 49 | +| fileNameCase | came,<br/> pascal,<br/> snake,<br/> snakeUpper,<br/> kebab | pascal | File name case for generated files<br/> (default: `MyComponent.jsx`) | |
| 50 | +| path | string | src/components | Path to generate files | | | |
| 51 | + |
| 52 | +Example: |
| 53 | + |
| 54 | +```json |
| 55 | +{ |
| 56 | + "styles": "scss", |
| 57 | + "typescript": false, |
| 58 | + "jsxExt": true, |
| 59 | + "fileNameCase": "pascal", |
| 60 | + "path": "src/components" |
| 61 | +} |
| 62 | +``` |
| 63 | + |
| 64 | +## License |
| 65 | + |
| 66 | +Generate React CLI is open source software [licensed as MIT](https://github.com/cristians953/react-codegen/blob/master/LICENSE). |
0 commit comments