A blazing-fast CLI to create React components 🔥
To install run this with npm
:
npm install --global start-react-components
or this with yarn
:
yarn global add start-react-component
To use this CLI you have two possible syntaxes:
start-react-component [cmd]
src [cmd]
To initialize the configurations, run the following and answer the question, to generate your configuration file .srcrc
$ start-react-component init
___ _ _ _ _ _
|_ _|_ __ (_) |_(_) __ _| (_)_______
| || '_ \| | __| |/ _` | | |_ / _ \
| || | | | | |_| | (_| | | |/ / __/
|___|_| |_|_|\__|_|\__,_|_|_/___\___|
Welcome to Start React Component, 👋
an opinionated CLI for creating component files from the command line.
It tries to adhere to the Community Best Practices, but it is customizable.
We will ask you some questions, about your project to make working with SRC faster and easier! 🚀
This will generate a .srcrc file in your project root.
? Enter the application folder ...
? Enter Styles Type ...
❯ emotion10
emotion
css
cssModules
? Enter prefered Component Type ...
❯ Functional Component
Class Component
? Are you using graphQl in the project? (Y/n)
These are the current main configuration options. More possibilities are coming in the future, see the Future Plans section at the bottom.
You can override the Configurations by running the init
command with the --force
or -f
Flag
Name | Default | Description |
---|---|---|
srcPath |
"src" |
The directory where the main code lies in |
stylesType |
"css" |
The type of the prefered generated stylings. Current options: css , cssModules , emotion , emotion10 |
componentType |
"functional" |
The prefered generated component style. Current options: functional , class |
graphql |
false |
If graphql is used in the project |
To create a new Component run the following and answer the questions:
_ _ ____ _ ____ _
| \ | | _____ __ | _ \ ___ __ _ ___| |_ / ___|___ _ __ ___ _ __ ___ _ __ ___ _ __ | |_
| \| |/ _ \ \ /\ / / | |_) / _ \/ _` |/ __| __| | | / _ \| '_ ` _ \| '_ \ / _ \| '_ \ / _ \ '_ \| __|
| |\ | __/\ V V / | _ < __/ (_| | (__| |_ | |__| (_) | | | | | | |_) | (_) | | | | __/ | | | |_
|_| \_|\___| \_/\_/ |_| \_\___|\__,_|\___|\__| \____\___/|_| |_| |_| .__/ \___/|_| |_|\___|_| |_|\__|
|_|
? Enter the parent folder to add to (components)
? Enter Folder Name ...
? Enter Component Name ...
? Select Component Type ...
? Create a query file? (Y/n)
This will generate an index.js
file, a styles.(css|scss|js)
file and a query.js
file if requested.
- Language Flavors:
- Add TypeScript support
- Styling Flavors:
scss
scssModules
styled-components
- More Configuration Options