Numbers Produce Meaning


    0.3.3 • Public • Published

    React Code Creator


    A lightweight tool to create boilerplate code for common React files.

    React Code Creator is a simple implementation of plop.js for common React files.

    React Code Creator supports creating the following types of React files:

    • Views (jsx or tsx)
    • Services
    • Contexts
    • Models (when using typescript)
    • Includes css and test spec files
    • Redux reducers
    • Actions
    • Storybook stories


    npm install react-code-creator --save-dev


    yarn add react-code-creator --dev


    Config file

    React Code Creator uses a react-code-creator.config.yaml file (which you should place at your project's root directory) to determine how to generate certain files. The config file should automatically be added to your root folder after installation with npm.

    The config file has the following properties:

    useTypescript: # Default: false 
    generateCss: # Default: true 
    generateTests: # Default: true 
    generateInterfaces: # Default: false 
    generateStories: # Default: false 
    generatePropTypes: false # true or false. Default is false 
    generateTypescriptProps: false # true or false. Default is false 
    cssExtension: # Default: "css" 
    testExtension: # Default: "spec" 
    root: # Default: "./src" 
    viewPath: # Default "views" 
    modelPath: # Default "models" 
    servicePath: # Default "services" 
    contextPath: # Default "contexts" 
    fileCase: # Default "camel" 
    pathCase: # Default "camel" 
    useSemicolons: # Default true 
    Property Description Possible Values Default
    useTypescript Whether to create typescript files (.tsx, .ts) true or false false
    generateCss Whether to generate css files when creating components true or false true
    generateTests Whether to generate test spec files when creating components and services true or false true
    generateInterfaces Whether to generate interfaces when creating services true or false false
    generateStories Whether to generate Storybook stories when creating components true or false false
    generatePropTypes Whether to generate React.PropTypes when creating components true or false false
    generateTypescriptProps Whether to generate Typescript props when creating components true or false false
    cssExtension Define the type of css file to generate "css", "scss", "less", "sass" "css"
    testExtension The file extension for test spec files "spec" or "test" "spec"
    root The root directory for your source code (where React Code Creator will place the generated files) any filepath string "./src"
    viewPath Where in the root directory to place autogenerated views any filepath string "views"
    modelPath Where in the root directory to place autogenerated models any filepath string "models"
    servicePath Where in the root directory to place autogenerated services any filepath string "services"
    contextPath Where in the root directory to place autogenerated contexts any filepath string "contexts"
    fileCase Casing type to try and enforce when creating file names "camel", "pascal", "dash", "snake", "dot" "camel"
    pathCase Casing type to try and enforce when creating file paths "camel", "pascal", "dash", "snake" "camel"
    useSemicolons Whether to use semicolons in generated files true or false true

    Casing Examples (fileCase and pathCase)

    • camel: camelCaseNames
    • pascal: PascalCaseNames
    • dash: dash-case-names
    • snake: snake_case_names
    • dot:


    After installing, React Code Creator should add a new script to your package.json file.

    Run npm run new to begin the CLI

    Skipping prompts

    If you already know the values you would like to provide the CLI, you can add them as args

    For example: npm run new componenent myComponent


    You can see the full list of commands by running npm run new

    Changing the Run command

    You can change the command from new by updating the scripts section of your package.json file.

    Naming Conventions

    When creating certain files, React Code Creator will use the exact name you specify as the filename. This is the case when creating a Component, Model, or a Service

    For example:

    • Creating component / class component: userProfile -> userProfile
    • Creating model: user -> user
    • Creating service: userFetcher -> userFetcher

    But when creating a Context or Reducer, React Code Creator will append Context or Reducer to the filename, so don't include them when naming them!

    For example:

    • Creating context: user -> userContext
    • Creating a reducer: user -> userReducer


    Avoid frequently changing the config

    React Code Creator relies on regex patterns to track and modify some generated files. Avoid changing the config parameters (such as file casing patterns, directories, or enabling/disabling typescript) to avoid errors related to locating previously generated files.


    You may use React Code Creator under the MIT license


    npm i react-code-creator

    DownloadsWeekly Downloads






    Unpacked Size

    37.4 kB

    Total Files


    Last publish


    • dnllowe