- Notifications
You must be signed in to change notification settings - Fork47
Creates react component folder structure
License
snaerth/create-react-component-folder
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Create React Component folder works on macOS, Windows, and Linux.
It createsReact orReact Native component folder structure with one command.
There is also support for Typescript, React Native, Less and Sass.
$ npm install --save-dev create-react-component-folder$ npx crcf myComponent
(npx comes with npm 5.2+ and higher, seeinstructions for older npm versions)
$ npm install --save-dev create-react-component-folder
$ npx crcf myComponent$ npx crcf components/myComponent
$ npx crcf components/header footer button navigation
myComponent├── index.js├── myComponent.js├── myComponent.css├── myComponent.test.handlebars
myComponent├── index.js├── myComponent.js├── myComponent.css├── myComponent.test.handlebars├── myComponent.stories.js
There is support for setting default config options, so you only have to set you desired config once. This makes creating your components even easier. All you have to do is follow one of these three options.
In your package.json, add a"crcf" property key with array of default config options
"stories" is to enable story book component
"spec" to have the file extensions
"crcf": ["scss","proptypes","stories","spec"]
Create a rc file named.crcfrc in the root of your project and insert a array of default config options in that file
["scss","proptypes","stories"]
Create a config file named.crcf.config.js in the root of your project and insert a array of default config options
["scss","proptypes""stories"]
So now all you have to do is typenpx crcf componentName and you will get all your default options when you create a component or multiple components. Here below you can see all the options.
["typescript","scss","less","nocss","notest","reactnative","createindex","uppercase","jsx","proptypes","stories","nosemi","singlequote","cssmodules","namedexports","graphql","stylesext", {"output":"base/directory/to/place/created/components" }]
$ npx crcf --createindex components/myComponent/
If the project you are working on always needs components structured differently, we've got you covered.
Publishing the templates allows you to have finer control over the generated components and content. Published templates use [https://handlebarsjs.com/] to generate the different components.
$ npx crcf publish-templates
The templates will be copied to a directory.crcf/templates relative to the directory you ran the script from.
Templates are always passed a number of variables to help you generate templates when certain flags / config options have been enabled.
| Variable | Type | Description |
|---|---|---|
| name | string | The generated name of the component |
| typescript | boolean | true whentypescript is enabled |
| native | boolean | true when building react native components |
| proptypes | boolean | true whenproptypes is enabled |
| export | boolean | true whennamedexports is enabled |
Tests and stories have extra variables (NOT available in functional or class component templates)
| Variable | Type | Description |
|---|---|---|
| nameLowercase | string | The generated name of the component in lowercase so it can be interpolated in sentences. |
| uppercase | boolean | true whenuppercase is enabled |
$ npx crcf create --help Usage: index [options] Options: -V, --version output the version number --typescript Creates Typescript component and files --nocss No css file --notest Notest file --cssmodules Creates css/less/scss file with .module extensions. Example --reactnative Creates React Native components --createindex Creates index.js filefor multple component imports --graphql Creates a index.graphql file --stylesext Creates a Component.styles.(ts|js) file -f, --functional Creates React stateless functional component -j, --jsx Creates the component file with .jsx extension -l, --less Adds .less file to component -s, --scss Adds .scss file to component -p, --proptypes Adds prop-types to component -u, --uppercase Component files start on uppercase letter -h, --help output usage information -sb, --stories Add Storie file to component -ns, --nosemi No semicolons -sq, --singlequote Formats output files with single quotes -x, --namedexports Creates files using named exports
MIT
About
Creates react component folder structure
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Packages0
Uh oh!
There was an error while loading.Please reload this page.