0.0.3 • Published 5 years ago
react-realtime-dashboard v0.0.3
ReactJS realtime dashboard
Display a dashboard and animate widgets when value change.
How to use
Dashboard
Props:
- col (int): Number of columns
- row (int): Number of rows
- gutter (int): Gutter size (in px)
- animationClassIn (string): Class to add to every widgets when animation start
- animationClassOut (string): Class to add to every widgets when animation end
Widget
Props:
- size (string): Widget size. Can be 'normal', 'large', 'tall' or 'big'
- animationClassIn (string): Class to add when animation start
- animationClassOut (string): Class to add when animation end
Update the component value with animation:
componentDidMount() {
this.timer = setInterval(() => {
this.props.animate().then(() => this.setState({date: new Date()}))
}, 3000);
}
Example
import React, { Component } from 'react';
import { Dashboard, Widget } from 'react-realtime-dashboard';
import animatecss from 'animate.css';
class App extends Component {
render() {
return (
<Dashboard row={4} col={3} gutter={10} animationClassIn='animated flipInX' animationClassOut='animated flipOutX'>
<Widget size='large'>
<MyCustomWidget/>
</Widget>
<Widget>
<AnotherCustomWidget/>
</Widget>
</Dashboard>
);
}
}