React Component Generator
On OS X/macOS,
generate-component can be installed via Homebrew:
brew install tpoulsen/homebrew-tools/generate-component
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
Installing `generate-component` is easiest with stack:
git clone email@example.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
Currently compatible with React 16 and lower; to be compatible with React v16, PropTypes is imported from the
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
Please make sure the appropriate packages are included in
package.json to best make use of
You can learn about the available command line options with
generate-component --help (or
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
generate-component has three subcommands:
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
Prints the current version of
generate-component and exits.
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.
React | ReactNative
This can be set in the config file,
-n is provided as a command line option, the config will be overridden and native files will be generated.
-r option is provided, a Redux connected container component will be generated.
ES6Class | CreateClass | Functional | Reason
This can be set in the config file as the default type of component to generate.
-t and a valid type (e.g.
-t ES6Class) are provided on the command line, the provided type will be generated.
Props can be provided in the command line with the
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"\
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),
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
To run the tests: