0.0.11 • Published 6 months ago

@anephenix/rcg v0.0.11

Weekly downloads
-
License
MIT
Repository
-
Last release
6 months ago

RCG

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

npm version CI Test Coverage Maintainability

Features

  • 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

Install

npm i @anephenix/rcg

Usage

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="<div id='logo'>Logo here</div>"

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:

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:

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

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

const customDOM = '<p>Hello</p>';
const customCSS = 'p { color: red; } ';
const customJSExtension = 'jsx';
const customCssExtension = 'style.js';

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

Loading options from a config file

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

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

Running Tests

npm t

License and Credits

© 2022 Anephenix OÜ. RCG is licensed under the MIT License.

0.0.11

6 months ago

0.0.10

11 months ago

0.0.9

2 years ago

0.0.8

2 years ago

0.0.7

2 years ago

0.0.6

3 years ago

0.0.5

3 years ago

0.0.4

3 years ago

0.0.3

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago