React Component Generator

I don’t do frontend development any more and as such this repository is woefully out of date. I don’t have any intention to update it again so, as of 2022-10-24, it is now archived.

Contents

• Installation
• Usage
• Compatibility
• Commands
  • Init
  • Gen
    • Project Type
    • Redux
    • Component Types
    • Props
• Examples

Installation

Homebrew:

On OS X/macOS, generate-component can be installed via Homebrew:

brew install tpoulsen/homebrew-tools/generate-component

Pre-compiled:

Download the tar.gz of the release; unarchive it and place in a directory that’s in your path.

tar -xvzf generate-component.tar.gz

From source:

You should have GHC and cabal or stack installed.

Installing `generate-component` is easiest with stack:

git clone git@github.com:tpoulsen/generate-component.git
stack install

This compiles the program and puts the executable in /.local/bin. If this is in your path, you now have the command generate-component.

Compatibility

Currently compatible with React 16 and lower; to be compatible with React v16, PropTypes is imported from the prop-types package.

ES6 Classes are the default types of components that are generated. The option to generate React.createClass components is still provided; to maintain compatibility going forward, these are generated using createReactClass from the create-react-class package.

Please make sure the appropriate packages are included in package.json to best make use of generate-component.

Usage

You can learn about the available command line options with generate-component --help (or -h).

stack install
# ... Output omitted for brevity ... #
Copied executables to $HOME/.local/bin:
- generate-component

generate-component --help
Flexible generator for React/React-Native components. Generate ES6 class,
React.createClass, and functional components with optional proptypes and redux
containers.

Usage: generate-component COMMAND
Generate React/React-Native components

Available options:
-h,--help                Show this help text

Available commands:
init                     Create a config file
gen                      Generate a component
version                  generate-component version

Commands

generate-component has three subcommands:

• init
• version
• gen

init

Initializes generate-component with a config file in the current directory. The config file specifies defaults such as project type, default component directory, and the default type of components to generate.

A generated config file looks like this:

# Type of the current project; determines what files will be
# generated for a component.
# Valid values: React | ReactNative
projectType: ReactNative

# Default directory in which to generate components.
defaultDirectory: app/components

# Style of components to generate
# Valid values: CreateClass | ES6Class | Functional | Reason
componentType: ES6Class

version

Prints the current version of generate-component and exits.

gen

Generates a component:

$ generate-component gen --help
Usage: generate-component gen NAME [-d|--component-directory DIR]
[-r|--redux-container] [-n|--react-native]
[-t|--component-type ARG] [-p|--proptypes ARG]
Generate a component

Available options:
-d,--component-directory DIR
Directory in which to add the component. Relative to
the project root.
-r,--redux-container     Create a redux connected container component
-n,--react-native        Create a React Native component
-t,--component-type ARG  The type of component to generate. Valid options:
                         ES6Class | CreateClass | Functional | Reason
-p,--proptypes ARG       Component props and types (enclosed in quotes) - e.g.
                         -p "id:number name:string.isRequired"
-h,--help                Show this help text

Command line arguments supersede config file settings.

If no config file is found in the current directory, generate-component will attempt to locate one in higher in your directory tree. If none is found, it uses the values in the generated config file (see above) for project type and component type; the directory in which the component is generated is the current directory.

Project Type

React | ReactNative This can be set in the config file, .generate-component.yaml. If -n is provided as a command line option, the config will be overridden and native files will be generated.

Redux

If the -r option is provided, a Redux connected container component will be generated.

Component Types

ES6Class | CreateClass | Functional | Reason This can be set in the config file as the default type of component to generate. If -t and a valid type (e.g. -t ES6Class) are provided on the command line, the provided type will be generated.

Props

Props can be provided in the command line with the -p flag.

Providing props pre-fills the propTypes declaration in the generated files and the parameters to a functional components.

Props must be provided as colon separated name:propType[.isRequired] values in a string, e.g: -p "name:string id:number age:number.isRequired"\

If the propType is followed by .isRequired, the prop will be required, otherwise it is considered optional.

Valid PropTypes are:

Prop := "name:propType[.isRequired]"

propType :=
  any,
  array,
  bool,
  func,
  number,
  object,
  string,
  symbol,
  node,
  element,
  oneOfType([propType]),
  arrayOf(propType),
  objectOf(propType),
  oneOf([Text]),
  instanceOf(Text),
  shape(Prop),

Examples

Generating a React component:

generate-component Test
Making directory at: ./app/components/Test
Copying files...
Writing ./app/components/Test/Test.js...
Writing ./app/components/Test/styles.js...
Writing ./app/components/Test/index.js...
Done

Generating a React component in an arbitrary directory:

generate-component -d dir Test
Making directory at: dir/Test
Copying files...
Writing dir/Test/Test.js...
Writing dir/Test/index.js...
Done

Generating a React Native component:

generate-component -n Test
Making directory at: ./app/components/Test
Copying files...
Writing ./app/components/Test/Test.js...
Writing ./app/components/Test/styles.js...
Writing ./app/components/Test/index.js...
Done

Generating a component with a Redux container (works for React and React Native components):

generate-component -c Test
Making directory at: ./app/components/Test
Copying files...
Writing ./app/components/Test/TestContainer.js...
Writing ./app/components/Test/Test.js...
Writing ./app/components/Test/styles.js...
Writing ./app/components/Test/index.js...
Done

Attempting to generate a component that already exists:

generate-component Test
Component directory exists; exiting without action.
Done

Testing

To run the tests:

stack test