React Components

This package has some good and quick react components to be used.

Installation

yarn add @mongez/react-components

Not Found Component

This component is used to show a not found page.

import { NotFound } from '@mongez/react-components';

<NotFound />

It will look like this:

import { NotFound } from '@mongez/react-components';
import { setRouterConfigurations } from '@mongez/react-router';

setRouterConfigurations({
    notFound: {
        mode: 'render',
        component: NotFound,
    }
});

Now any route that is not found will case a render to the NotFound component.

Progress Bar

This component is used to show a progress bar.

import { Progress } from '@mongez/react-components';

<Progress />

If you want to control the progress, you can use the value prop.

import { Progress } from '@mongez/react-components';

<Progress loading value={50} />

It looks like this:

To change progress height, you can use the height prop.

import { Progress } from '@mongez/react-components';

<Progress height={5} />

To Change the color of the progress bar, you can use the color prop.

import { Progress } from '@mongez/react-components';

<Progress loading value={50} color="red" />

To change the glow color, you can use the glowColor prop.

import { Progress } from '@mongez/react-components';

<Progress loading value={50} color="red" glowColor="red" />

To change the glow effect height you can use the glow prop.

import { Progress } from '@mongez/react-components';

<Progress loading value={50} color="red" glowColor="red" glow={25} />

Here is all available props:

Prop	Type	Default	Description
loading	boolean	true	If true, the progress will be shown automatically.
value	number	undefined	The progress value to be controlled
height	number	5	The progress bar height
color	string	#21a6e9	The progress bar color
glowColor	string	#21a6e9	The progress bar glow color
glow	number	20	The progress bar glow height
zIndex	number	1000	The progress bar z-index