@tristanwritescode/react-gen NPM

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

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

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 of`kebabCase`, `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