🌧️ REACT RAINER 🌧️
make react components ⚡quicky⚡ with CLI.
Command Line script to generate [ components, files, and pages ] for ' REACT ' including React-Native and Next.js.
Feel free to play around with the code and fork this repl at instagram.
Install
$ npm install rainer
# recommended
$ npm install rainer -g
# use without installing
$ npx rainer
Usage
$ rainer src/components/product/Product
// src/components/product/Product.js
import React, from "react";
const Product = () => {
return <></>
}
export default Product
Note : You can also pass diffrent flags to generate more modifcation to basic component such as , class components , component + stylesheets , component having lifecycle sudo code.
FLAGS 🚩
- -v, --version - check current rainer version.
- --help - print's user manually in cli.
- -c, --class - used to create class component.
- -r, --resource - used to create componet including common lifecycle methods.
-
style:[OPTIONS] - this will create component with stylesheet attached to it.
style options:- css
- scss
- sass
- less
-
EGG:[OPTION] - Easter 🥚Egg.
options for EGG are single alphabet from [a to Z].
#hatch an egg
$ rainer EGG:A
Getting Started
$ rainer src/pages/rat/Rat -c -r style:css
Alternatively
$ rainer src/pages/rat/Rat --class --resource style:css
create's two file Rat.js (component) and rat.css (stylesheet) in src/pages/rat directory.
// inside src/pages/rat/Rat.js
import React from "react";
import "./rat.css";
class Rat extends React.Component {
constructor(props) {
super(props);
this.state = { loading: false };
}
componentDidMount() {}
componentDidUpdate(prevProps, prevState) {}
componentWillUnmount() {}
render() {
return <></>;
}
}
export default Rat;
Functional Component with Resource + stylesheet
$ rainer src/pages/monkey/Monkey -r style:sass
This create's two file Monkey.js (component) and monkey.sass (stylesheet) in src/components/monkey directory.
// inside src/components/monkey/Monkey.js
import React, { useState, useEffect } from "react";
import "./monkey.sass";
function Monkey() {
const [state, setState] = useState(false);
useEffect(() => {
return () => {};
}, []);
return <> </>;
}
export default Monkey;
Note: if we dont need need stylesheet we can simple skip the style:[option] flag , same with the resource flag
Easter Egg 🥚
How to trigger Egg Hatching.
for this we have to pass an alphabet character to flag named EGG
example :
$ rainer EGG:W
output :
$ rainer EGG:w
┊┊┊┊┊┊┊┊┊┊┊┊┊╭╭╭╮╮╮┊┊┊┊┊┊┊┊┊
┊┊┊┊┊┊┊┊┊┊┊┊╰╰╲╱╯╯┊┊┊┊┊┊┊┊
┊┊┊┊┊┊┊┊┏╮╭┓╭━━━━━━╮┊┊┊┊┊┊┊┊
┊┊┊┊┊┊┊┊╰╮╭╯┃┈┈┈┈┈┈┃┊┊┊┊┊┊┊┊
┊┊┊┊┊┊┊┊┊┃╰━╯┈┈╰╯┈┈┃┊┊┊┊┊┊┊┊
┊┊┊┊┊┊┊┊┊┃┈┈┈┈┈┈┈╰━┫┊┊┊┊┊┊┊┊
╲╱╲╱╲╱╲╱╲╱╲╱╲╱
Note: rainer nest may or may not contain some eggs.
more eggs will be added in upcomming version.