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

Full view on CodeSandbox

Props

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

| name | type | description | default | required | | -------------------- | --------------------------------- | ----------------------------------------- | --------------------- | -------- | | H | number | Baseline height | - | true | | waveParams | WaveItem[] | List of waves | - | true | | animated | boolean | If true, animation when mounted | false | false | | easing | TimingFunction | Specifies the speed curve of an animation | TimingFunction.LINEAR | false | | speed | number | Base duration in ms of one wave cycle | 5000 | false | | speedIncreasePerWave | number | Increase in speed in ms per each wave | 1000 | false | | className | string | className for wave container | - | false | | style | CSSProperties | style for wave container | - | false |

Interfaces and Enums

WaveItem

| name | type | description | | ---- | ------ | --------------------------------- | | A | number | distance protruding from baseline | | T | number | distance of a wavelength | | fill | any | background color of wave |

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',
}