React Component Generation - A command line interface tool to generate React components on the fly.
npm install -g recog
# checkout recog
git checkout https://github.com/fergusfrl/recog.git
# install dependencies
npm install
# transpile typescript
npm run build
# set symlink
npm link
# ready to go!
recog <ComponentName> [options]
options:
- -d, --dir
Specify a directory to generate the component.
Default Value: current working directory (CWD), "./" - -s, --state
Generates a new stateful React component. - -t, --typescript
Generates a new Typescript React component. - -p, --props
Generate a React component with props. - -f, --folder
Generates a new Folder which will contain the component.
Useful in conjunction "--jest" and "-css" commands. - -j, --jest
Generates a new jest test file for the component. - -c, --css
Generates a new css file for the component.
recog Button
/* ./Button.jsx */
import React from 'react';
const Button = () => (
<div className="button">
Button
</div>
);
export default Button;
$ recog Button -d ./components --state --typescript --props
/* ./components/Button.tsx */
import React, { useState } from 'react';
interface IStateButton {
// state interface
}
interface IPropsButton {
// props interface
}
const Button: React.FC = (props: IPropsButton) => {
const [state, setState] = useState<IStateButton>({});
return (
<div>
Button
</div>
);
};
export default Button;
$ recog Button --folder --jest --css
|_<current working directory>
|_ Button
|_ Button.jsx
|_ Button.test.js
|_ button.css