TouchMyRipple
touchMyRipple is a simple library that integrate ripple effect in your fantastic site!
Demo and Docs
Installation
or
npm install touchmyripple --save
Basic Usage
index.js
; tmripple; tmripple;
Methods
init(settings[Object])
This method enables ripple effect to all the elements that have the attribute data-animation="ripple".
All the following options are optional
settings[Object]
// area is an option to make data-animation more specific area: 'class, id' // color...🤔 color: 'rgba, hex, hsla' // pass the scrolling element if it's not window offsetEl: 'class, id' // this option accept an event listener eventListener: 'event'
attachToSelectors(settings[Object])
This method enables ripple effect to all the elements that match the class passed in 'selectors'
settings[Object]
// selector of the element you want to attach the ripple ( is required ) selectors: 'class, id' // color...🤔🤔🤔🤔🤔🤔 color: 'rgba, hex, hsla' // pass the scrolling element if it's not window offsetEl: 'class, id' // this option accept an event listener eventListener: 'event'
React Usage
button.jsx
import withRipple from 'touchmyripple/react'; { return <button > Hello <span>World</span> </button> ; } Button color: "red" ignoreEls: type: "secondary" ;
app.js
Component { const settingObj = eventName: "click" color: "blue" return <Button = /> // or use it with default settings: <Button /> }
settings[Object]
// default is "rgba(255,255,255,0.5)" color: 'rgba, hex, hsla' // this option accept an event listener for // differentiate smartphone event from desktop events // default is "click" eventListener: 'event' // ignore a specific element disabled: true // 🔺 this setting can be setted ONLY in the decorator function // you can create an object of key/value attributes to ignore ignoreEls: class: "CTA_Button"