react-animated-button
an animated button using SVG paths and react-anime module
Last updated 2 years ago by crizzo .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-animated-button 
SYNC missed versions from official npm registry.

animated-react-buttonSVG

This is an npm module to install a an animated react button component, inspired by those on the home page of animejs.com. It has many customizable properties.

API

The following props are exposed on the imported button component, allowing the user to flexibly customize the animated button.

  • strokeWidth - change the width of the stroke on the svg. Default is 1px
  • strokeColor - change the color of the SVG path, default is 'blue'
  • fill - fill of the SVG button, default is none
  • fillRule - fill rule of the SVG button, default is 'evenodd'
  • width - given value or 180 by default
  • height - Height is not exposed, but is set to be 1/3 of the given width, which will keep the text centered inside the button
  • fontSize - container font size, default is 1em
  • textStyle - apply styling to the text in both button states
  • buttonHoverTextClassName - apply a class of styles to the text in the animated state
  • normalTextClassName - apply a class of styles to the text in the default state
  • buttonText - the text that will appear in the button in both states by default
  • animatedText - if present, this text will overwrite the buttonText when in hover state
  • path - pass in a custom SVG path for the normal state
  • animatedPath - pass in a custom SVG path for the animated state
  • containerStyle - pass in custom style object to the button's container element
  • pathAnimationProps - user can pass in their own animation properties to tweak the default animation
  • textAnimationProps - user can pass in their own animation properties to tweak the default animation
  • additionalButtonProps - user can pass in their own props to the svg viewbox that holds the button
  • props.onClick - button will invoke props.onClick();

Current Tags

  • 0.2.6                                ...           latest (2 years ago)

13 Versions

  • 0.2.6                                ...           2 years ago
  • 0.2.5                                ...           2 years ago
  • 0.2.4                                ...           2 years ago
  • 0.2.3                                ...           2 years ago
  • 0.2.2                                ...           2 years ago
  • 0.2.1                                ...           2 years ago
  • 0.1.141                                ...           2 years ago
  • 0.1.14                                ...           2 years ago
  • 0.1.13                                ...           2 years ago
  • 0.1.12                                ...           2 years ago
  • 0.1.11                                ...           2 years ago
  • 0.1.1                                ...           2 years ago
  • 0.1.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 13
Last Day 0
Last Week 0
Last Month 0
Dependencies (3)
Dev Dependencies (25)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |