Need help with create-react-component-folder?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

145 Stars 46 Forks MIT License 226 Commits 8 Opened issues


Creates react component folder structure

Services available


Need anything else?

Contributors list

Create React Component folder

NPM version NPM downloads


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)

npx crcf myComponent


Read the artice on Medium


$ 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

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

With storybook enabled

├── 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": [

Create a rc file named .crcfrc in the root of your project and insert a array of default config options in that file


Create a config file named .crcf.config.js in the root of your project and insert a array of default config options


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.

    "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 [] to generate the different components.

$ npx crcf publish-templates

The templates will be copied to a directory

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 |

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

is enabled


$ npx crcf create --help

Usage: index [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




We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.