Have ideas to improve npm?Join in the discussion! »

    @nvigneux/crcf

    0.2.2 • Public • Published

    Create React Component folder

    NPM version NPM downloads

    About

    Create React Component folder works on macOS, Windows, and Linux.
    It creates React component folder structure with one command.
    There is also support for Less and Sass.

    Quick Overview

    $ npm install -g @nvigneux/crcf
    $ crcf myComponent

    Tutorial

    Read the artice on Medium

    Installation

    $ npm install -g @nvigneux/crcf

    Creating single component

    $ crcf myComponent
    $ crcf components/myComponent

    Output single

    Creating multiple components

    $ 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",
    ]

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

    [
      "scss",
      "less",
      "nocss",
      "test",
      "createindex",
      "jsx",
      "proptypes",
      "stories",
      "cssmodules",
    ]

    Creating index.js file for multiple component imports

    $ crcf --createindex

    Output in index.js file for multiple component imports

    Options

    $ crcf --help
     
      Usage: index [options]
     
      Options:
     
        -V, --version     Output the version number
        --nocss           No css file
        --test            Test file
        --cssmodules      Creates css/less/scss file with .module extensions. Example
        --createindex     Creates index.js file for multple component imports
        --stories         Add Storie file to 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

    Author

    License

    MIT

    Install

    npm i @nvigneux/crcf

    DownloadsWeekly Downloads

    0

    Version

    0.2.2

    License

    MIT

    Unpacked Size

    1.14 MB

    Total Files

    55

    Last publish

    Collaborators

    • avatar