react-power-path

enhanced <path /> that recieve its totalLength via specific styles.

Installation

yarn add react-power-path

Usage

import React from 'react'
import Path from 'react-power-path'

export default (props) => (
  <svg viewBox='0 0 300 300'>
    <g>
      <Path {...{
        d: 'M 100 100 L 300 100 L 200 300 z',
        style: {
          strokeDasharray: (totalLength) => {},
          strokeDashoffset: (totalLength) => {},
          animation: (totalLength) => {},
          animationName: (totalLength) => {},
        }
      }} />
    </g>
  </svg>
)

API

specific styles:

• strokeDasharray
• strokeDashoffset
• animation
• animationName

If they are set as function, the totalLength passed, and the result will be value. Or set as values, nothing happens.

react-power-path depend on createElementNS and path.getTotalLength.

License

MIT (http://opensource.org/licenses/MIT)