Water-drop-cursor NPM

water-drop-cursor

This is package to provide a fascinating mouse cursor to make your project more attractive, its easy to use and compatible with React.js, Next.js and anything you imagine

Installation

npm i water-drop-cursor

Usage

React.js and Next.js projects :
- Install the package using the above command
- Add the following script in index.html in react and _document.jsx in your next project.
```
 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js" defer></script>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js" defer></script>
```
- Add the css file in your app.jsx in react.js and _app.jsx in next.js, using the following
```
import 'water-drop-cursor/style.css';
```
- Import the init function in App.jsx in react and _app.jsx in next, using the following
```
import { init } from 'water-drop-cursor';
```
- Use the init function in app.jsx in react and _app.jsx in next, using the following
```
useEffect(() => {
  init();
}, []);
```
For Vanilla JavaScript projects :
- Open the GitHub for this particular project
- Copy the main.js file and create it in a file with same name in your project directory and pase the code
- Copy the style.css file and create it in a file with same name in your project directory and paste the code
- Finally add this script at the end of your body
```
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js" defer></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js" defer></script>

    <script src="main.js" defer></script>
```
Finally
- Add mouse-cursor class to the section where you want your cursor effect, if you want it in your whole project add it in body tag, or else add it in a section or div whatever you want