react-waveview v2.0.1

WaveView

Wave view component in React

Screenshot

Install

npm i react-waveview --save

Get started

Example

import Wave from 'react-waveview';

const waveItems: WaveItem[] = [
  { A: 10, T: 180, fill: '#62c2ff' },
  { A: 15, T: 140, fill: '#0087dc' },
  { A: 20, T: 100, fill: '#1aa7ff' }
];

const MyComponent = () => (
  <Wave H={30} waveParams={waveItems} animated={true}></Wave>
);

Props

/**
  ---------+------------------------+
  <-- P -->|<--    T    -->|        |______
           |   /\          |   /\   |  ^
           |  /  \         |  /  \  |  A
           | /    \        | /    \ |  |
           |/      \       |/      \|__V___
           |        \      /        |  ^
           |         \    /         |  |
           |          \  /          |  |
           |           \/           |  H
           |                        |  |
           |        fill            |  |
  ---------+------------------------+__V___
*/

Interfaces and Enums

WaveItem

TimingFunction

An enum containing all of speed curve of an animation

{
  EASE = 'ease',
  EASE_IN = 'ease-in',
  EASE_OUT = 'ease-out',
  EASE_IN_OUT = 'ease-in-out',
  LINEAR = 'linear',
  STEP_START = 'step-start',
  STEP_END = 'step-end',
}