Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hmu332233/react.makereactcomponentskeleton
makeReactComponentSkeleton is simple function that make react component skeleton
https://github.com/hmu332233/react.makereactcomponentskeleton
Last synced: 4 days ago
JSON representation
makeReactComponentSkeleton is simple function that make react component skeleton
- Host: GitHub
- URL: https://github.com/hmu332233/react.makereactcomponentskeleton
- Owner: hmu332233
- License: mit
- Created: 2018-07-03T16:45:17.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-07-23T17:27:10.000Z (over 6 years ago)
- Last Synced: 2024-11-03T23:35:20.248Z (11 days ago)
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/make-react-component-skeleton
- Size: 12.7 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## makeReactComponentSkeleton
makeReactComponentSkeleton is simple function that make react component skeleton
### install
```bash
$ npm install -g make-react-component-skeleton
```
### usage
```
Usage: mkcpnt [options]
Options:
-n, --name [name] component name to be created. (default: ExampleComponent)
-t, --type [type] component type to be created. "class" or "function" (default: class)
-p, --path [path] path where component will be created. (default: ./)
-j, --jstype [jstype] component file extension to be created. (default: jsx)
-c, --csstype [csstype] style file extension to be created. (default: scss)
-v, --version output the version number
-S, --single if include this, only component is made
-h, --help output usage information
```
### example
#### basic example
```bash
$ mkcpnt -n Input
```
- Structure of the created directory
```
Input
|-- Input.jsx
|-- Input.scss
|-- index.js
```
- jsx -- class type
```js
import React from 'react';
import PropTypes from 'prop-types';
import styles from './Input.scss';
class Input extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
);
}
}
Input.propTypes = {
};
Input.defaultProps = {
};
export default Input;
```
- index
```js
import Input from './Input';
export default Input;
```
#### function example
```bash
$ mkcpnt -n Input -t function
```
Structure of the created directory is same
- jsx -- function type
```js
import React from 'react';
import PropTypes from 'prop-types';
import styles from './Input.scss';
const Input = props => {
return (
);
}
Input.propTypes = {
};
Input.defaultProps = {
};
export default Input;
```
#### file extension example
```bash
$ mkcpnt -n Input -j js -c css
```
- result
```
Input
|-- Input.js
|-- Input.css
|-- index.js
```