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

Read the artice on Medium

Installation

$ npm install --save-dev create-react-component-folder

Creating a 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.handlebars

With storybook enabled

myComponent
├── index.js
├── myComponent.js
├── myComponent.css
├── myComponent.test.handlebars
├── myComponent.stories.js

Setting 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

[
  "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",
  "singlequote",
  "cssmodules",
  "namedexports",
  "graphql",
  "stylesext",
  {
    "output": "base/directory/to/place/created/components"
  }
]

Creating index.js file for multiple component imports

$ npx crcf --createindex components/myComponent/

Output in index.js file for multiple component imports

Publishing templates

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.

Modifying templates

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 when typescript is enabled
native	boolean	true when building react native components
proptypes	boolean	true when proptypes is enabled
export	boolean	true when namedexports 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 when uppercase is enabled

Options

$ 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            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
    --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

Author

• Snær Seljan Þóroddsson

License

MIT