# @freewillpbc/create-react-component-folder

> Creates single react component folder structure

Latest version **0.2.4** (published 2019-11-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @freewillpbc/create-react-component-folder
pnpm add @freewillpbc/create-react-component-folder
yarn add @freewillpbc/create-react-component-folder
bun add @freewillpbc/create-react-component-folder
```

Provides the commands `crcf`, `create-react-component-folder`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.4 |
| Published | 2019-11-01 |
| First published | 2019-10-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 9 |
| Unpacked size | 1.1 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Snær Seljan Þóroddsson |
| Maintainers | fcamilleri22, jrpalomar-fw, mja2128 |
| Keywords | cli, component, components, crcf, create-react-app, create-react-component, create-react-component-folder, npm, react, react-native, scaffold, typescript |

## Links

- npm: https://www.npmjs.com/package/@freewillpbc/create-react-component-folder
- Repository: https://github.com/freewillpbc/create-react-component-folder
- Homepage: https://github.com/freewillpbc/create-react-component-folder#readme
- Issues: https://github.com/freewillpbc/create-react-component-folder/issues
- npm.io page: https://npm.io/package/@freewillpbc/create-react-component-folder

## Dependencies (9)

- [fs](https://npm.io/package/fs.md) 0.0.2
- [chalk](https://npm.io/package/chalk.md) ^2.4.2
- [mkdirp](https://npm.io/package/mkdirp.md) ^0.5.1
- [semver](https://npm.io/package/semver.md) ^6.3.0
- [prettier](https://npm.io/package/prettier.md) ^1.16.4
- [commander](https://npm.io/package/commander.md) ^2.17.1
- [log-update](https://npm.io/package/log-update.md) ^3.1.0
- [node-alias](https://npm.io/package/node-alias.md) ^1.0.4
- [cosmiconfig](https://npm.io/package/cosmiconfig.md) ^5.1.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.2.4 (latest) — 2019-11-01
- 0.2.3 — 2019-10-31
- 0.2.2 — 2019-10-29
- 0.2.1 — 2019-10-29
- 0.2.0 — 2019-10-29

## README

# Create React Component Folder

a fork of: https://github.com/snaerth/create-react-component-folder

## About

Create React Component folder works on macOS, Windows, and Linux.<br>
It creates **React** or **React Native** component folder structure with one command.<br>
There is also support for Typescript, React Native, Less and Sass.

## Quick Overview

```sh
$ npm install --save-dev create-react-component-folder
$ npx crcf myComponent
```

_([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://github.com/snaerth/create-react-component-folder/blob/master/docs/npx_instructions.md))_

<p align='center'>
<img src='https://github.com/snaerth/create-react-component-folder/blob/master/docs/crcf_video.svg' width='600' alt='npx crcf myComponent'>
</p>

## Tutorial

[Read the artice on Medium](https://medium.com/@snrseljanroddsson/create-multiple-react-folder-components-in-one-command-1411cd6bd1ce)

## Installation

```sh
$ npm install --save-dev create-react-component-folder
```

## Creating single component

```sh
$ npx crcf myComponent
$ npx crcf components/myComponent
```

## Output single

<p align='center'>
<img src='https://github.com/snaerth/create-react-component-folder/blob/master/docs/single2.png?raw=true' width='600' />
</p>

## Creating multiple components

```sh
$ npx crcf components/header footer button navigation
```

## Output multiple

<p align='center'>
<img src='https://github.com/snaerth/create-react-component-folder/blob/master/docs/multiple2.png?raw=true'  width='600' />
</p>

## Component folder structure

```sh
myComponent
├── index.js
├── myComponent.js
├── myComponent.css
├── myComponent.test.js
```

### if story book is enable

```sh
myComponent
├── index.js
├── myComponent.js
├── myComponent.css
├── myComponent.test.js
├── myComponent.stories.js
```

## Set default config

There is support for setting default config options, so you only have to set you desired config once. This makes creating your components even easier. All you have to do is follow one of these three options.

In your package.json, add a **"crcf"** property key with array of default config options

"stories" is to enable story book component

"spec" to have the file extensions

```sh
"crcf": [
  "scss",
  "proptypes",
  "stories",
  "spec"
]
```

Create a rc file named **.crcfrc** in the root of your project and insert a array of default config options in that file

```sh
[
  "scss",
  "proptypes",
  "stories"
]
```

Create a config file named **crcf.config.js** in the root of your project and insert a array of default config options

```js
module.exports = [
  "scss",
  "proptypes"
  "stories"
]
```

So now all you have to do is type **npx crcf componentName** and you will get all your default options when you create a component or multiple components. Here below you can see all the options.

```sh
[
  "typescript",
  "scss",
  "less",
  "nocss",
  "notest",
  "reactnative",
  "createindex",
  "uppercase",
  "jsx",
  "proptypes",
  "stories",
  "nosemi",
  "cssmodules",
]
```

## Creating index.js file for multple component imports

```sh
$ npx crcf --createindex
```

## Output in index.js file for multple component imports

<p align='center'>
<img src='https://github.com/snaerth/create-react-component-folder/blob/master/docs/index2.png?raw=true' width='600'/>
</p>

## Options

```sh
$ npx crcf --help

  Usage: index [options]

  Options:

    -V, --version     output the version number
    --typescript      Creates Typescript component and files
    --nocss           No css file
    --notest          No test file
    --cssmodules       Creates css/less/scss file with .module extensions. Example
    --reactnative     Creates React Native components
    --createindex     Creates index.js file for multple component imports
    -f, --functional  Creates React stateless functional component
    -j, --jsx         Creates the component file with .jsx extension
    -l, --less        Adds .less file to component
    -s, --scss        Adds .scss file to component
    -p, --proptypes   Adds prop-types to component
    -u, --uppercase   Component files start on uppercase letter
    -h, --help        output usage information
    -sb, --stories    Add Storie file to component
    -ns, --nosemi     No semicolons
```

## Author

- [Snær Seljan Þóroddsson](https://github.com/snaerth)

## License

MIT

---
_Source: https://npm.io/package/@freewillpbc/create-react-component-folder · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._