lancelot-animated-buttons

Animated buttoms for React.js

Install

npm install --save lancelot-animated-buttons

Usage

1. Animated Ellipsis button

import React from 'react'
import {LancelotEllipsisButton} from 'lancelot-animated-buttons'

const index = (props) => {
  return (
      <LancelotEllipsisButton/>
  )
}

Result

Customization

The table below shows the properties to customize the button:

| Property | Purpose | Type | Possible values | Default | | ------------- |:-------------:|:------------:|:---------------:|:------------:| | animationTime | Duration of the rotation effect after clicking in seconds |number |any positive number |.5 | | background | Background color of the button |string |colors |White | | buttonSize | Size of the button |number |1-10 |3 | | checked | Button checked or not |boolean |true/false |false | | clicked | To call function when clicked |function |function |null | | crossColor | Color of the cross |string |colors |red | | cursor | Type of cursor when hovering |string |Cursor types (help, wait, pointer, grab, etc) |pointer | | disableHoverEffect | To disable (if true) the effect when mouse is over |boolen |true/false |false | | ellipsisColor | Color of the ellipsis |string |colors |Black | | hoverEffectTime | Duration of the effect when hovering in seconds |number |any positive number |.5 | | rotationIntensity | intensity of the rotation when clicked |number |1-10 |3 |

Example of customization

  <LancelotEllipsisButton
    animationTime={1}
    background="#78c2fa"
    buttonSize={8}
    clicked={()=>console.log("Lancelot!")}
    crossColor="#9dfa78"
    disableHoverEffect
    ellipsisColor="red"
    rotationIntensity={10}
  />

Result

2. Animated Hamburguer button

import React from 'react'
import {LancelotHamburguerButton} from 'lancelot-animated-buttons'

const index = (props) => {
  return (
      <LancelotHamburguerButton/>
  )
}

Result

Customization

The table below shows the properties to customize the button:

| Property | Purpose | Type | Possible values | Default | | ------------- |:-------------:|:------------:|:---------------:|:------------:| | animationTime | Duration of the rotation effect after clicking in seconds |number |any positive number |.5 | | background | Background color of the button |string |colors |White | | buttonSize | Size of the button |number |1-10 |3 | | checked | Button checked or not |boolean |true/false |false | | clicked | To call function when clicked |function |function |null | | crossColor | Color of the cross |string |colors |red | | cursor | Type of cursor when hovering |string |Cursor types (help, wait, pointer, grab, etc) |pointer | | disableHoverEffect | To disable (if true) the effect when mouse is over |boolen |true/false |false | | hamburguerColor | Color of the hamburguer |string |colors |Black | | hoverEffectTime | Duration of the effect when hovering in seconds |number |any positive number |.5 | | rotationIntensity | intensity of the rotation when clicked |number |1-10 |3 |

Example of customization

  <LancelotHamburguerButton
    animationTime={2}
    background="#ccc"
    buttonSize={8}
    clicked={()=>console.log("Lancelot!")}
    crossColor="#238a0e"
    disableHoverEffect
    hamburguerColor="purple"
    rotationIntensity={10}
  />

Result

License

MIT © Elson Ramos