❀Ninja Pokémon Master
    Wondering what’s next for npm?Check out our public roadmap! Β»

    create-react-component-folder-jovpet

    1.5.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 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-jovpet
    $ npx crcf myComponent

    (npx comes with npm 5.2+ and higher, see instructions for older npm versions)

    npx crcf myComponent

    Tutorial

    Read the artice on Medium

    Installation

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

    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.css
    β”œβ”€β”€ myComponent.test
    β”œβ”€β”€ myComponent.view.js

    With storybook enabled

    myComponent
    β”œβ”€β”€ index.js
    β”œβ”€β”€ myComponent.css
    β”œβ”€β”€ myComponent.test
    β”œβ”€β”€ myComponent.stories.js
    β”œβ”€β”€ myComponent.view.js

    With GQL enabled

    myComponent
    β”œβ”€β”€ index.js
    β”œβ”€β”€ myComponent.apollo.js
    β”œβ”€β”€ myComponent.controller.js
    β”œβ”€β”€ myComponent.css
    β”œβ”€β”€ myComponent.test
    β”œβ”€β”€ myComponent.stories.js
    β”œβ”€β”€ myComponent.view.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",
      "hyphenatedcss",
      "notest",
      "reactnative",
      "createindex",
      "uppercase",
      "jsx",
      "proptypes",
      "stories",
      "nosemi",
      "cssmodules"
      "namedexports",
      "controller"
      "graphql",
      "stylesext",
      {
        "scssinclude": [
          "./src/assets/scss/settings"
        ],
        "output": "base/directory/to/place/created/components",
        "graphqldefs": "base/directory/for/graphql/graphql-types",
        "apollolink": {
          "path": "./apollo/LoadingApolloLink.js",
          "name": "LoadingApolloLink"
        }
      }
    ]

    Creating index.js file for multiple component imports

    $ npx crcf --createindex

    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 --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
        --graphqldefs       A Path to grapqhl type definitions (if you are using typescript and have types for gql)
        --apollolink        An object containing definitions for apollo Mocking link i.e
                            {
                              "path": "./apollo/LoadingApolloLink.js",
                              "name": "LoadingApolloLink"
                            }
        --stylesext         Creates a Component.styles.(ts|js) file
        --controller        Creates a stateful pattern with index, view and controller 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
        -x, --namedexports  Creates files using named exports
        -si, --scssinclude  Adds array of included files in scss file (Works only with -s | --scss)

    Author

    License

    MIT

    Install

    npm i create-react-component-folder-jovpet

    DownloadsWeekly Downloads

    0

    Version

    1.5.2

    License

    MIT

    Unpacked Size

    1.19 MB

    Total Files

    92

    Last publish

    Collaborators

    • avatar