# guess-modal-lib

> A library of React components created using `create-react-app`. It contains a modal which can be used by any project by just importing.

Latest version **0.2.0** (published 2021-06-20) · 0 weekly downloads

## Install

```sh
npm install guess-modal-lib
pnpm add guess-modal-lib
yarn add guess-modal-lib
bun add guess-modal-lib
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2021-06-20 |
| First published | 2021-06-20 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 1.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | jaku245 |

## Links

- npm: https://www.npmjs.com/package/guess-modal-lib
- Repository: https://github.com/Jaku245/GuessModalPackage
- Homepage: https://github.com/Jaku245/GuessModalPackage#readme
- Issues: https://github.com/Jaku245/GuessModalPackage/issues
- npm.io page: https://npm.io/package/guess-modal-lib

## Dependencies (1)

- [shards-react](https://npm.io/package/shards-react.md) ^1.0.3

## Recent versions

- 0.2.0 (latest) — 2021-06-20
- 0.1.2 — 2021-06-20
- 0.1.1 — 2021-06-20
- 0.1.0 — 2021-06-20

## README

# GuessModal Package
A library of React components created using `create-react-app`. It contains a modal which can be used by any project by just importing.

It shows any random pokemon at the start and after that you can guess what this pokemon is or you can guess another random pokemon or random pokemon with the same type.
## Installation and Set-up
Run the following command in your terminal : `npm i guess-modal-lib`.

After installing, you have to import two styling files in index.js (please maintain the order of this two imports for better UI)

index.js
```javascript
import React from 'react';
.
.
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";
.
.
import App from './App';
```
## How to use
Create one state variable for component visibility and function to toggle modal.
Pass this visibility variable and function into the component props.

Also use this component at the end of file as it is a modal.

Here is one code example.

```javascript
import React, { Component } from 'react';
import { GuessModal } from 'guess-modal-lib';

export default class Example extends Component {

    constructor(props) {
        super(props);
        this.state = {
            showModal: false
        }
    }

    toggleModal = async () => {
        await this.setState({
            showModal: !this.state.showModal
        })
    }

    render() {
        return (
            <>
                <button onClick={this.toggleModal} >Guess pokemon</button>
                <GuessModal showModal={this.state.showModal} toggleModal={this.toggleModal} />
            </>
        )
    }
}
```

## Examples
Starting screen will look like this :

![start](/samples/start.png)

You can see error when you try to check answer wih out typing anything :

![error](/samples/error.png)

Animation for correct guess will be shown like this :

![correct](/samples/correct.png)

Animation for wrong guess will be shown like this :

![wrong](/samples/wrong.png)

On clicking guess related pokemon, same type pokemon will be shown :

![same](/samples/same.png)

On clicking guess random pokemon, any random pokemon will be shown :

![random](/samples/random.png)


Happy Using!!!

---
_Source: https://npm.io/package/guess-modal-lib · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._