npm package: @fineanmol/annoying-submit-button
Description: React submit button that slides away on hover until your form is valid — the classic annoying-submit UX.
Author: Anmol Agarwal
Latest version: 1.0.1

<div align="center">
   <h1> Annoying Submit Button in a Form using ReactJS </h1>

   <img src="https://media.giphy.com/media/j4A1puoG0sUxOB5rB5/giphy.gif" width=250 />
  <p>

   <a href="https://github.com/fineanmol/Annoying-submit-button/graphs/Stars" alt="Stars">
        <img src="https://img.shields.io/github/stars/fineanmol/Annoying-submit-button" /></a>
        
   <a href="https://github.com/fineanmol/Annoying-submit-button/graphs/issues" alt="Contributors">
        <img src="https://img.shields.io/github/issues/fineanmol/Annoying-submit-button" /></a>
   <a href="https://github.com/fineanmol/Annoying-submit-button/graphs/contributors" alt="Contributors">
        <img src="https://img.shields.io/github/contributors/fineanmol/Annoying-submit-button" /></a>

   <a href="https://github.com/fineanmol/Annoying-submit-button/forks">
      <img alt="Issues" src="https://img.shields.io/github/forks/fineanmol/Annoying-submit-button" />
    </a> 
    <a href="https://github.com/fineanmol/Annoying-submit-button/license">
      <img alt="GitHub pull requests" src="https://img.shields.io/github/license/fineanmol/Annoying-submit-button" />
    </a>
    <a href="https://github.com/fineanmol/Annoying-submit-button">
      <img alt="GitHub pull requests" src="https://img.shields.io/badge/version-0.1.0-blue?color=0088ff" />
    </a>

   </p>
</div>


You won't be able to submit the form until you enter correct length of password and a valid email ID.  Enjoy playing with it. :)
#Hacktoberfest

## npm package

Install the reusable component in your own React app:

```bash
npm install @fineanmol/annoying-submit-button
```

```jsx
import AnnoyingSubmitButton from '@fineanmol/annoying-submit-button';
import '@fineanmol/annoying-submit-button/style.css';

<AnnoyingSubmitButton
  isValid={emailValid && passwordOk}
  className={`submit-button ${isValid ? 'button-success' : ''}`}
>
  Submit
</AnnoyingSubmitButton>
```

- **`isValid`** — when `false`, the button slides on hover so the user cannot click it easily until the form is valid.

## Project Preview
![Preview video of project](./content/preview.gif)


## :bulb: Live Project Link
[Click here to play with **Annoying Submit Button**](https://annoyingsubmitbutton.netlify.app/)

---

## :writing_hand: Authors

👤 **Anmol Agarwal**

[![portfolio](https://img.shields.io/badge/my_portfolio-000?style=for-the-badge&logo=ko-fi&logoColor=white)](portfolio)
[![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](linkedin)
[![twitter](https://img.shields.io/badge/twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)](twitter)

[portfolio]:https://github.com/fineanmol
[linkedin]:https://linkedin.com/in/fineanmol
[twitter]:https://twitter.com/fineanmol

---

## :people_hugging: Show your support

Give a ⭐️ if you like this project and want to support it!

---


## 🛠️ Installation Steps

Star and Fork the Repo 🌟 and this will keep us motivated.

1. Clone the repository

<pre>
git clone https://github.com/fineanmol/Annoying-submit-button
</pre>

2. Change the working directory

<pre>
cd Annoying-submit-button
</pre>

3. Install dependencies

<pre>
npm install
</pre>

4. Run the app

<pre>
npm start
</pre>


---

## 🤝 Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (`git checkout -b 'feature/AmazingFeature'`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request

Feel free to check the [issues page](../../issues/).
---
## 📝 License

This project is under the [MIT](./LICENSE) license.

---

## Acknowledgments

- Hat tip to anyone whose code was used
- Inspiration
- I wish to show my appreciation
- etc
---
## :pray: Thanks

Thanks to everyone who has contributed towards this project

<div>
    <a href="https://github.com/fineanmol/Annoying-submit-button/graphs/contributors">
    <img src="https://contrib.rocks/image?repo=fineanmol/Annoying-submit-button" />
    </a>
</div>

---