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.

Maintainers

• P A N K A J
• Get In Touch
  • instagram
  • [email protected]
  • [email protected]