Skip to content

Latest commit

 

History

History
99 lines (74 loc) · 3.15 KB

README.md

File metadata and controls

99 lines (74 loc) · 3.15 KB

Rainify 🌧️

Rainify is a library for creating customizable rain effects for React projects.

Installation

pnpm install rainify
# or
npm install rainify
# or
yarn add rainify

Usage

React

To use the rain effect in a React project, you can import the component and use it directly in your React components.

Example

  1. Import the Components
import { Rainify } from 'rainify'
  1. 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

Configuration

Component Properties

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.

Configuration Example

<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'
/>

Contributing

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.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Contact

Thank you for using Rainify! I hope you enjoy the rain effect in your projects.

Made with 💜 by thiagotnon.