touchmyripple

TouchMyRipple

touchMyRipple is a simple library that integrate ripple effect in your fantastic site!

Demo and Docs

Installation

Download Build

<script src="myDirectory/touchMyRipple.js"></script>

or

npm install touchmyripple --save

Basic Usage

index.js

import tmripple from 'touchmyripple';

tmripple.init({
    color: '#bada55', // default is 'rgba(255, 255, 255, 0.4)'
    eventListener: 'touchstart' // default is 'click'
});

tmripple.attachToSelectors({
    selectors: '#foo .bar [type=button]',
    color: 'rgba(0, 0, 0, 0.4)',
    eventListener: 'mousedown'
});

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

class Button extends Component {
  render() {
    return (
      <button {...this.props}>
        Hello <span>World</span>
      </button>
    );
  }
}

export default withRipple(Button, {
  color: "red",
  ignoreEls: { type: "secondary" }
});

app.js

class App extends React.Component {
  render() {
    const settingObj = {
      eventName: "click", 
      color: "blue"
    }

    return  <Button tmripple={settingObj} />
    // 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"}
    }