RCG

A Node.js library and CLI for generating React components.

  

$3

- Generates a React component based on a given name
- Creates the component and accompanying files and folders
- Takes time out of generating files and folders for React components

$3

``
npm i @anephenix/rcg
`

$3

There are 2 ways that you can use RCG - via CLI, or as an NPM module in your Node.js code.

#### via CLI

After you have installed rcg, cd into your React app, and run this:

`
npx rcg MyComponent
`

This will do the following:

- Create a folder called 'my-component' in the src/components folder
- Inside that folder, it will create these files:
- A React component file called MyComponent.js
- A styling file called MyComponent.scss
- A test file called MyComponent.test.js

You can also generate the component in a different folder:

`
npx rcg LoginPage --directory pages
`

This will generate a folder called 'login-page' in the pages folder, such as for a Next.js app.

To add custom DOM to insert into the React component, you can pass the --dom flag:

`
npx rcg NavBar --dom="

"
`

To add custom CSS to insert into the SASS file for the component, you can pass the --css flag:

`
npx rcg NavBar --css="#logo { color: #ffcc00;}"
`

To specify a custom file extension for the component and test file names (e.g. jsx, tsx), you can pass the --jsExtension flag:

`
npx rcg NavBar --jsExtension=jsx
`

To specify a custom file extension for the css file (e.g. .style.js), you can pass the --cssExtension flag:

`
npx rcg NavBar --cssExtension=style.js
`

By default, it generates a scss file. This will likely change in the future to a default pattern of css-in-js

#### via NPM

You can load it this way:

`javascript
const path = require('path');
const rcg = require('@anephenix/rcg');

const componentName = 'MyComponent';
const srcFolderPath = path.join(process.cwd(), 'src', 'components');

(async () => {
await rcg(componentName, srcFolderPath);
})();
`

If you want the React component to include custom DOM and/or the SASS file to include custom CSS, you can also pass these parameters:

`javascript
const path = require('path');
const rcg = require('@anephenix/rcg');

const componentName = 'MyComponent';
const srcFolderPath = path.join(process.cwd(), 'src', 'components');

const customDOM = '

Hello

';
const customCSS = 'p { color: red; } ';
const customJSExtension = 'jsx';
const customCssExtension = 'style.js';

(async () => {
await rcg(
componentName,
srcFolderPath,
customDOM,
customCSS,
customJSExtension,
customCssExtension
);
})();
`

$3

Rather than having to specify arguments via the CLI each time, you can load them via a rcg.config.js file, with these contents:

`javascript
const path = require('path');

const config = {
// Put the component folder and file in the components directory
directory: path.join(process.cwd(), 'components'),
// Use the jsx filename extension for the component files
jsExtension: 'jsx',
};

module.exports = config;
`

You can create an rcg.config.js file by running this command:

`
npx rcg init
`

$3

`
npm t
``

$3

© 2025 Anephenix Ltd. RCG is licensed under the MIT License.