Strap

Simple React Component Boilerplate Generater

A command-line utility for bootstraping react component template.

Quickstart

Install via NPM:

```bash

yarn

$ yarn global add strap

npm

$ npm i -g strap ```

cd to project's directory, and run strap Button to generate the boilerplate code.

Your project will now have a new directory at src/components/Button. This directory has two files:

``jsx //Button/index.js`

export { default } from "./Button"; ```

``jsx //Button/Button.js`

import React from "react";

export default function Button() { return <>; } ```

Customizing Templates

Custom Templates with a template type-name can be provide. The name of the file or directory should be functional or class for functional or class component respectively.

Custom Templates can be provided in two ways:

Files

Templates can be customized by providing custom templates. You will need to add the following two files with _component placeholder that will be replaced by the component name.

```jsx // functional.js

import React from "react";

function _component() { return <>; }

export default _component; ```

```jsx // class.js

import React from "react";

class _component { render() { return <>; } }

export default _component; ```

Strap will look for the custom templates in src/components/.templates directory. Template path can be customized by templateDirectory in strap-config.json.

Directory

If there are multiple files, a directory with the component type name can be used instead. To replace the filename with component name, use _component.js as the filename.

```jsx // index.js

export { default } from "_component.js"; ```

```jsx // _component.js import React from "react";

export default function _component() { return <>; } ```

Strap will create a dir with the same name as the component name and put every file in it. Every instance of _component will be replaced with component name in every file.

Config

strap-config.json can be used to change the defaults. To generate the config file use strap --init command.

| Property | Default | Summary | Type | | ------------- | -------------------------- | -------------------------------------------------------------------- | ------ | ---------- | ------ | | basePath | src/components | Base dir in which components will be generated | string | | templatesDir | src/component/.templates | Path to look for templates dir | string | | componentType | func | Component type that will be generated if the type flag not specified | func | functional | class | | verboseOutput | false | Whether to show verbose output or not | bool |

Examples

Nested Path

strap Hello/World/Button

Class Component

strap Button -c or strap Button --class