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}/>
)
}
