https://github.com/lewis617/render-react-components

Cli tool for rendering react components
https://github.com/lewis617/render-react-components

Last synced: 2 months ago
JSON representation

Cli tool for rendering react components

• Host: GitHub
• URL: https://github.com/lewis617/render-react-components
• Owner: lewis617
• Created: 2018-04-23T06:19:08.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-04-26T00:53:16.000Z (about 7 years ago)
• Last Synced: 2025-01-24T17:45:30.210Z (4 months ago)
• Language: JavaScript
• Size: 114 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# render-react-components

[![NPM version](https://img.shields.io/npm/v/render-react-components.svg?style=flat)](https://npmjs.org/package/render-react-components)

[![NPM downloads](http://img.shields.io/npm/dm/render-react-components.svg?style=flat)](https://npmjs.org/package/render-react-components)

[![Dependencies](https://david-dm.org/lewis617/render-react-components/status.svg)](https://david-dm.org/lewis617/render-react-components)

[查看中文版](https://github.com/lewis617/render-react-components/blob/master/README_zh-cn.md)

render-react-components is a cli tool to recursilvly search all the react components in your project(only in src directory) and create files to render them isolatedly.

![](https://img.alicdn.com/tfs/TB1VPzQnHGYBuNjy0FoXXciBFXa-894-444.gif)

## Getting started

```bash

## Install globally or locally

$ npm i render-react-components -g

## Create files to render components

$ rrc init

## you can use the filter argument(the keyword of compoennt path) to init for part of components

$ rrc init --filter=Component1

## or simply use -f=keyword to filter

$ rrc init -f=Component1

## Local development

$ rrc dev

## Delete all the files that created by rrc init

$ rrc clean

```

## Configuration

For configuration, you can use `.rrc.js` configuration file, e.g.

```js

module.exports = {

  disableCSSModules: true,

  externals: {

    react: 'React',

    'react-dom': 'ReactDOM',

    'prop-types': 'PropTypes',

  }

};

```

### disableCSSModules

Disable [CSS Modules](https://github.com/css-modules/css-modules)，we do not recommend doing this.

### externals

Configure webpack's [externals] (https://webpack.js.org/configuration/externals/) property.

e.g.

```js

// Don't pack react and react-dom

"externals": {

  "react": "window.React",

  "react-dom": "window.ReactDOM"

}

```

### alias

Configure webpack's [resolve.alias](https://webpack.js.org/configuration/resolve/#resolve-alias) property.

### extraResolveExtensions

Configure webpack's [resolve.extensions](https://webpack.js.org/configuration/resolve/#resolve-extensions) property.

### extraResolveModules

Configure webpack's [resolve.modules](https://webpack.js.org/configuration/resolve/#resolve-extensions) property.

## LICENSE

MIT