React 500

React 500 is a customizeable common react component for internal server errors.

Installation

npm install react-500

Usage

import React from 'react';
import Error from "react-500";

export default function App(){
    return(
        <Error />
    )
}

API

Following are the props which can be passed to customize the behaviour

| Prop | Type | | ------ | ------ | | oopsStyle | Javascript Object | | messageStyle | Javascript Object | | button | Jsx Element |

Customization

customize the text as follows

export default function App(){
    const OopsStyle = {
        fontSize: "6rem",
        display: "block",
        fontFamily: "sans-serif",
        letterSpacing: "10px",
        color: "#b5d5ff",
        fontStyle: "italic"
    }
    const messageStyle={
        fontSize: "1.2rem",
        textAlign:"center",
        fontWeight: "400",
        fontFamily: "roboto",
        letterSpacing: "0.7rem",
        color: "pink",
        display: "block",

    }
    return(
        <Error 
            oopsStyle={OopsStyle} 
            messageStyle={messageStyle} 
        />
    )
}

any custom jsx component can be added in place on the homepage button

const ButtonStyle = {
    backgroundColor: "#2424e8a8",
    color: "white",
    padding: "10px 25px",
    borderRadius: "20px",
    marginLeft: "8.5rem",
    marginTop: "2rem",
    border: 0,
}
const Button = ()=>{
    return(
        <button style={ButtonStyle} onClick={()=>alert(1)}>
            Back Button
        </button>
    )
}
export default function App(){
    return(
        <Error button={Button}/>
    )
}