@freewillpbc/create-react-component-folder v0.2.4
Create React Component Folder
a fork of: https://github.com/snaerth/create-react-component-folder
About
Create React Component folder works on macOS, Windows, and Linux. It creates React or React Native component folder structure with one command. There is also support for Typescript, React Native, Less and Sass.
Quick Overview
$ npm install --save-dev create-react-component-folder
$ npx crcf myComponent
(npx comes with npm 5.2+ and higher, see instructions for older npm versions)
Tutorial
Installation
$ npm install --save-dev create-react-component-folder
Creating single component
$ npx crcf myComponent
$ npx crcf components/myComponent
Output single
Creating multiple components
$ npx crcf components/header footer button navigation
Output multiple
Component folder structure
myComponent
├── index.js
├── myComponent.js
├── myComponent.css
├── myComponent.test.js
if story book is enable
myComponent
├── index.js
├── myComponent.js
├── myComponent.css
├── myComponent.test.js
├── myComponent.stories.js
Set default config
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
module.exports = [
"scss",
"proptypes"
"stories"
]
So now all you have to do is type npx 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",
"cssmodules",
]
Creating index.js file for multple component imports
$ npx crcf --createindex
Output in index.js file for multple component imports
Options
$ npx crcf --help
Usage: index [options]
Options:
-V, --version output the version number
--typescript Creates Typescript component and files
--nocss No css file
--notest No test file
--cssmodules Creates css/less/scss file with .module extensions. Example
--reactnative Creates React Native components
--createindex Creates index.js file for multple component imports
-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
Author
License
MIT