@404pagez/react/README.md

This is templates of 404page for React

# @404pagez/react

This is a template of 404page for react.  
Making 404 pages is more troublesome than I thought. just use a 404page template to save your time.

## Install

```
npm install @404pagez/react
```

## Usage

```javascript
import { Simple404 } from "@404pagez/react";

const NotFound = () => {
    return (
        <div>
            <Simple404 size={20} isButton={false} />
        </div>
    );
};
```

## 404pages

-   [Simple404](#simple404)
-   [Warning404](#warning404)
-   [Section404](#section404)
-   [Cat404](#cat404)
-   [Blocked404](#blocked404)
-   [Pepe404](#pepe404)

## Props

### Simple404 <a id=simple404></a>

<img src="https://user-images.githubusercontent.com/9592408/168017258-c1ed6816-522e-4e84-b832-24c7ec1a967a.png" alt="simple404" width="400" />

| props         | type       |                      |
| ------------- | ---------- | -------------------- |
| size          | number     | required             |
| onButtonClick | () => void | optional             |
| isButton      | boolean    | optional             |
| buttonLabel   | string     | optional             |
| buttonColor   | string     | optional(ex:#ffffff) |

<br />

### Warning404 <a id=warning404></a>

<img src="https://user-images.githubusercontent.com/9592408/168017173-ece897ad-e26f-416d-afd4-f4b4ad06d398.png" alt="warning404" width="400" />

| props         | type       |                      |
| ------------- | ---------- | -------------------- |
| size          | number     | required             |
| onButtonClick | () => void | optional             |
| isButton      | boolean    | optional             |
| buttonLabel   | string     | optional             |
| buttonColor   | string     | optional(ex:#ffffff) |
| color         | string     | optional(ex:#ffffff) |

<br />

### Section404 <a id=section404></a>

<img src="https://user-images.githubusercontent.com/9592408/168016963-a5df4b59-45d8-4208-84d9-8ecf64a2c125.png" alt="section404" width="400"/>

| props         | type       |                      |
| ------------- | ---------- | -------------------- |
| size          | number     | required             |
| onButtonClick | () => void | optional             |
| isButton      | boolean    | optional             |
| buttonLabel   | string     | optional             |
| buttonColor   | string     | optional(ex:#ffffff) |
| color         | string     | optional(ex:#ffffff) |

<br />

### Cat404 <a id=cat404></a>

<img src="https://user-images.githubusercontent.com/9592408/168426426-dd27e757-2ef6-4616-b124-ff26dabac793.png" alt="cat404" width="400"/>

| props         | type       |                      |
| ------------- | ---------- | -------------------- |
| size          | number     | required             |
| onButtonClick | () => void | optional             |
| isButton      | boolean    | optional             |
| buttonLabel   | string     | optional             |
| buttonColor   | string     | optional(ex:#ffffff) |

<br />

### Blocked404 <a id=blocked404></a>

<img src="https://user-images.githubusercontent.com/9592408/168426472-aef63d45-6002-4299-8401-91f0d10b6401.png" alt="blocked404" width="400"/>

| props         | type       |                      |
| ------------- | ---------- | -------------------- |
| size          | number     | required             |
| onButtonClick | () => void | optional             |
| isButton      | boolean    | optional             |
| buttonLabel   | string     | optional             |
| buttonColor   | string     | optional(ex:#ffffff) |

<br />

### Pepe404 <a id=pepe404></a>

<img src="https://user-images.githubusercontent.com/9592408/168944793-115f0a2e-dfab-40e1-9c38-69d3eaa5626f.png" alt="pepe404" width="400"/>

| props         | type       |                      |
| ------------- | ---------- | -------------------- |
| size          | number     | required             |
| onButtonClick | () => void | optional             |
| isButton      | boolean    | optional             |
| buttonLabel   | string     | optional             |
| buttonColor   | string     | optional(ex:#ffffff) |

<br />

## Contact

[![Twitter URL](https://img.shields.io/twitter/url/https/twitter.com/bukotsunikki.svg?style=social&label=Follow%20%40hee_dev)](https://twitter.com/hee_dev)


## License

<a href="https://github.com/404pagez/react/blob/HEAD/LICENSE">MIT</a>