Vue-rain NPM | npm.io

vue-rain

Purpose

This is a vue component made for fun which renders slots in rain animation. It could be reallt useful if you want to create a shower effect with emojis.

Example

 <VueRain :rainSpeed="100" :rainFade="3000">
    <!-- Rendering water drop emoji using slots-->
    <div><p>&#128167;</p></div>
  </VueRain>

Props

There are currently the following props:

Prop	Description	Required	Default
rainSpeed	This prop determines the speed of which the slots gets render, the lesser the more slots gets created. Consider it like the lesser it is the more its going to rain. It is measured in milliseconds.	`false`	`30`
rainFade	This prop is used to specify the time after which the rendered slot should fade away. It is measured in milliseconds.	`false`	`5000`

Slots

There are currently the following slots:

Slot	Description	Example
`default`	This is default slot which will be rendered inside the component and the rain animation is added to this HTML.	It is in the above usage Example

Documentation

Coming soon...

vue vue-js rain

core-js vue

@infinitebrahmanuniverse/nolb-vue-r @everything-registry/sub-chunk-3090

0.1.0

4 years ago