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