@rehx/react-component-cli v1.0.0
React Component CLI
Easily bootstrap new react components based on your preferences.
Usage
To create a button component, run the following command in your terminal;
crc button
- src
- components
- button.jsx
- components
For nested components
crc PageLayout layouts
- src
- components
- layouts
- PageLayout.jsx
- layouts
- components
Installation
Clone the project
git clone https://github.com/ajiohjesse/react-component-cli.git
Go to the project directory
cd react-component-cli
Install as global
npm install -g
Test your installation
crc -v
Configuration
Every new component is a react functional component. The
src
folder is used by default and will be created if it
doesn't exist.
Default options can be changed by creating a
crc.config.json
file in the root folder of your computer
(C:\Users\username
for windows). This configuration will
be applied for every project.
To customize based on specific projects, create the
crc.config.json
file in the root folder of your React project
directory.
Default Config
{
"src": true,
"extension": "jsx",
"styleOption": "plain"
}
Reference
Key | Type | Description |
---|---|---|
src | boolean | Use the src folder when creating new components. |
extension | string | The default file extension. Options are js , jsx , ts , or tsx . |
styleOption | string | Customize the component boiler plate based on prefered style option. Options are plain , css-modules or styled-components |
Output
plain
//button.jsx
const Button = () => {
return (
<div>
<h1>button</h1>
</div>
);
};
export default Button;
css-modules
//button.jsx
import styles from './button.module.css';
const Button = () => {
return (
<div>
<h1>button</h1>
</div>
);
};
export default Button;
Note: A corresponding
.module.css
file will be created and auto imported if style option is set to css-modules.
styled-components
//Button.jsx
import styled from 'styled-components';
const Button = () => {
return (
<ButtonWrapper>
<h1>Button</h1>
<ButtonWrapper>
);
};
export default Button;
const ButtonWrapper = styled.div`
display: grid;
`
Flags
crc init
- Initialize a config file in your project directory.
crc -v
- Check version.
crc -help
- See options.
crc <component name> --plain
- force create a plain component.
Author
Inspired by Josh Comeau's new-component
available via
this
repository.
1 year ago