react-allpages

react-allpages is an package for ReactJS. Here the login page, register page, Home page and other components can be developed without any boilerplate code.

Installation

Use the package manager npm to install react-allpages.

npm install react-allpages

Usage

HomeOne

import "./App.css";
import { HomeOne } from "react-allpages";
import { BrowserRouter, Route } from "react-router-dom";
import Login from "./login/Login";
import Register from "./register/Register"

function App() {
  const btn = [
    {
      name: "Login",
      color: "white",
      backgroundColor: "red",
      link: "/login",
    },
    {
      name: "Register",
      color: "white",
      backgroundColor: "red",
      link: "/register",
    },
  ];
  return (
    <BrowserRouter>
      <Route exact path="/login" component={Login} />
      <Route exact path="/register" component={Login} />
      <HomeOne
        bgImage="https://venngage-wordpress.s3.amazonaws.com/uploads/2018/09/Colorful-Circle-Simple-Background-Image-1.jpg"
        text="Welcome to react-allpages"
        buttons={btn}
      />
    </BrowserRouter>
  );
}

export default App;

Button

import "./App.css";
import { Button } from "react-allpages";

function App() {
  return (
    <div className="App">
      <Button
        text="Get Started"
        elevation={0.3}
        bgColor="green"
        color="white"
        onBtnClick={(e) => console.log("click")}
      />
    </div>
  );
}

export default App;

RegisterPage

import { RegisterPage } from "react-allpages";

function App() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [fnm, setfnm] = useState("");
  const [lnm, setlnm] = useState("");
  const handleClick = () => {
    console.log(fnm, lnm, email, password);
  };
  return (
    <div
      style={{
        justifyContent: "center",
        alignItems: "center",
        textAlign: "center",
        display: "flex",
        flexDirection: "column",
        minHeight: "100vh",
      }}
    >
      <RegisterPage
        fnmValue={fnm}
        lnmValue={lnm}
        emailValue={email}
        passwordValue={password}
        fnmChange={(e) => setfnm(e)}
        lnmChange={(e) => setlnm(e)}
        emailChange={(e) => setEmail(e)}
        passwordChange={(e) => setPassword(e)}
        onBtnClick={handleClick}
      />
    </div>
  );
}

LoginPage

import { LoginPage } from "react-allpages";

function App() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const handleClick = () => {
    console.log(email, password);
  };
  return (
    <div
      style={{
        justifyContent: "center",
        alignItems: "center",
        textAlign: "center",
        display: "flex",
        flexDirection: "column",
        minHeight: "100vh",
      }}
    >
      <LoginPage
        emailValue={email}
        passwordValue={password}
        emailChange={(e) => setEmail(e)}
        passwordChange={(e) => setPassword(e)}
        onBtnClick={handleClick}
      />
    </div>
  );
}

License

MIT