Rainify is a library for creating customizable rain effects for React projects.
pnpm install rainify
# or
npm install rainify
# or
yarn add rainifyTo use the rain effect in a React project, you can import the component and use it directly in your React components.
Example
- Import the Components
import { Rainify } from 'rainify'- Use the Component in Your Project
import { Rainify } from 'rainify'
const App = () => {
return (
<Rainify
isRaining
intensity={1000}
color='rgba(255, 255, 255, 0.5)'
zIndex={0}
speed={10}
wind={10}
thickness={1}
splashColor='rgba(255, 255, 255, 0.5)'
splashDuration={6}
/>
)
}
export default App| Prop | Type | Default | Description |
|---|---|---|---|
| intensity | number | 50 |
Controls the intensity of the rain. |
| speed | number | 1 |
Sets the speed of the raindrops. |
| wind | number | 0 |
Defines the wind direction. |
| color | string | rgba(255, 255, 255, 0.5) |
Specifies the color of the raindrops. Example: "rgba(255, 255, 255, 0.5)". |
| thickness | number | 1 |
Defines the thickness of the raindrops. |
| isRaining | boolean | true |
Enables or disables the rain effect. |
| className | string | '' |
Applies a custom CSS class to the canvas element |
| zIndex | number | 0 |
Controls the z-index of the canvas to manage stacking order. |
| splashColor | string | rgba(255, 255, 255, 0.5) |
Defines the color of the splash effect when raindrops hit the ground. |
| splashDuration | number | 60 |
Sets the duration of the splash effect before it fades out. |
<Rainify
isRaining={isRaining}
intensity={1000}
color='rgba(255, 255, 255, 0.5)'
zIndex={0}
speed={10}
wind={10}
thickness={1}
splashColor='rgba(255, 255, 255, 0.5)'
splashDuration={6}
className='my-custom-class'
/>If you want to contribute to the project, feel free to open issues and pull requests. Please follow the contribution guidelines and maintain code quality.
This project is licensed under the MIT License. See the LICENSE file for more details.
Thank you for using Rainify! I hope you enjoy the rain effect in your projects.
Made with 💜 by thiagotnon.