@tristanwritescode/react-gen

React-Gen

An extensible file scaffolder for any web project but made with React in mind since Angular already has a great code gen tool.

Installation

npm install -g @tristanwritescode/react-gen

Usage

react-gen [command] [templateNameOrShortcut] [...paths]

• If command is omitted, gen is assumed.
• Multiple paths can be provided to generate multiple template instances

Create a settings file (optional)

react-gen init

Scaffold the functional-component template

react-gen gen functional-component components/some/path/my-component

or

react-gen gen fc components/some/path/my-component

or

react-gen fc components/some/path/my-component components/some/path/other-component

Configuration

Create a json file named .react-gen at your package.json level, or use the init command.

Settings schema

Property	Description	Default
basePath	An absolute path from the settings file for which template paths should be relative to.	"src"
templates	An array of custom templates to be merged with existing templates	N/A
directoryForTemplate	Given a path "routes/my-component"; true will create a my-component directory and place the template files in there, false will place template files directly in the routes directory.	true
directoryCasing	Case conversion option for directory names. One of kebabCase, camelCase, pascalCase	"kebabCase"
fileCasing	Case conversion option for file names. One ofkebabCase, camelCase, pascalCase	"pascalCase"

Template schema

Property	Description
name	The name of the template. If this name matches an existing template it will override that template.
shortcut	A shortcut value for the template. (Optional)
files	An array of paths to files for this template. Can be absolute or relative to the settings file.
fileCasing	Overrides the file casing setting for just this template.
directoryCasing	Overrides the directory casing setting for just this template

Custom templates

File naming

Template files should be named file.[ext].mustache. The file portion will be replaced with the last segment of the provided template path. The .mustache extension will be removed.

Eg. routes/my-component with the file name file.tsx.mustache will result in the file name MyComponent.tsx assuming the default fileCasing of pascalCase

File template

The templates themselves are mustache templates. The model available has the following properties.

Property	Description
directory	The directory path for the template as determined by directoryCasing and directoryForTemplate settings
fileName	The file portion of the file name as determined by the fileCasing setting.
kebabName	The name of the template formatted in kebab case
camelName	The name of the template formatted in camel case
pascalName	The name of the template formatted in pascal case

Example

See functional-component