Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/saifadin/start-react-component
CLI to create React Components
https://github.com/saifadin/start-react-component
cli components node react
Last synced: about 1 month ago
JSON representation
CLI to create React Components
- Host: GitHub
- URL: https://github.com/saifadin/start-react-component
- Owner: Saifadin
- Created: 2018-12-10T14:06:07.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-03-24T03:57:45.000Z (over 2 years ago)
- Last Synced: 2023-03-01T05:25:53.016Z (over 1 year ago)
- Topics: cli, components, node, react
- Language: JavaScript
- Size: 28.3 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Create React Component
A blazing-fast CLI to create React components 🔥
[](https://badge.fury.io/js/start-react-component) [](https://github.com/Saifadin/start-react-component/issues)
## Installation
To install run this with `npm`:
```
npm install --global start-react-components
```
or this with `yarn`:
```
yarn global add start-react-component
```
## Usage
To use this CLI you have two possible syntaxes:
```
start-react-component [cmd]
src [cmd]
```
## Commands
### Initialize
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
### Configuration Options
| 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 |
### New Component
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.
## Future Plans
- Language Flavors:
- Add TypeScript support
- Styling Flavors:
- `scss`
- `scssModules`
- `styled-components`
- More Configuration Options