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 |