react-pages

A lightweight React component library for common utility pages.

Installation

npm install @rohansm14/react-pages

Peer dependencies: Make sure you have react and react-dom installed in your project.

Getting Started

Import the component you need and drop it into your app.

<LostPage404 />

A plug-and-play 404 page with sensible defaults. Every aspect is customizable via props.

Basic Usage

import { LostPage404 } from "@rohansm14/react-pages";

<LostPage404 />

With Custom Props

<LostPage404
  bgcolor="linear-gradient(135deg, #667eea, #764ba2, red)"
  color="#ffffff"
  title="Oops! Wrong Turn"
  message="The page you're looking for has vanished into the void."
  homelink="/home"
  buttonmessage="Take me home"
  buttonbgcolor="#6366f1"
  buttoncolor="#ffffff"
  scaleonhover={true}
/>

<Forbidden403 />

A plug-and-play 403 page with sensible defaults. Every aspect is customizable via props.

Basic Usage

import { Forbidden403 } from "@rohansm14/react-pages";

<Forbidden403 />

With Custom Props

<Forbidden403
  bgcolor="linear-gradient(135deg, darkblue, blue, skyblue, skyblue, skyblue)"
  color="#ffffff"
  title="Aaah! Introuder Alert"
  message="You are not alolowed to wonder in here. Get out!!"
  homelink="/home"
  buttonmessage="Retreat to home"
  buttonbgcolor="#6366f1"
  buttoncolor="#ffffff"
  scaleonhover={true}
/>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | bgcolor | string | "#ffffff" or "linear-gradient(135deg, red, blue, green)" | Background of the page | | color | string | "#000000" | Text color | | scaleonhover | bool | false | Enables a scale + translate animation on the 404 heading on hover | | codesize | string | "4rem" | Font size of the 404 code | | title | string | "Page Not Found" | Heading below the error code | | titlesize | string | "2rem" | Font size of the title | | message | string | "Sorry, the page you are looking for does not exist" | Subtext below the title | | messagesize | string | "1rem" | Font size of the message | | homelink | string | "/" | URL the button navigates to | | buttonmessage | string | "Go back Home" | Label on the button | | buttonbgcolor | string | "#000000" | Background color of the button | | buttoncolor | string | "#ffffff" | Text color of the button | | buttonsize | string | "1rem" | Font size of the button text |

Contributing

Contributions are welcome! Please read the Contributing Guide before submitting a PR.

License

MIT © Rohan S Mirjankar