5.2.1 • Published 4 years ago
react-trafficlight v5.2.1
react-trafficlight
Traffic light component for React.
Installation
npm install --save react-trafficlight
Demo
Working demo on CodePen: React Traffic Light
Example use
Usage example 1
import React from 'react';
import TrafficLight from 'react-trafficlight';
const TrafficLightContainerExample1 = () => (
<div>
<TrafficLight RedOn />
<TrafficLight RedOn YellowOn />
<TrafficLight YellowOn />
<TrafficLight GreenOn />
</div>
);
export default TrafficLightContainerExample1;
Usage example 2 - Clickable
import React, { Component } from 'react';
import TrafficLight from 'react-trafficlight';
class TrafficLightContainerExample2 extends Component {
state = {
redOn: true,
yellowOn: false,
greenOn: false,
}
render() {
return (
<TrafficLight
onRedClick={() => this.setState({ redOn: !this.state.redOn })}
onYellowClick={() => this.setState({ yellowOn: !this.state.yellowOn })}
onGreenClick={() => this.setState({ greenOn: !this.state.greenOn })}
RedOn={this.state.redOn}
YellowOn={this.state.yellowOn}
GreenOn={this.state.greenOn}
/>
);
}
}
export default TrafficLightContainerExample2;
Usage example 3 - Horizontal
import React from 'react';
import TrafficLight from 'react-trafficlight';
const TrafficLightContainerExample3 = () => (
<div>
<TrafficLight GreenOn Horizontal/>
</div>
);
export default TrafficLightContainerExample3;
5.2.1
4 years ago
5.2.0
4 years ago
5.1.4
4 years ago
5.1.3
4 years ago
5.1.3-beta.3
4 years ago
5.1.3-beta.2
4 years ago
5.1.3-beta.1
4 years ago
5.1.3-beta.0
4 years ago
5.1.2
7 years ago
5.1.1
7 years ago
5.1.0
7 years ago
5.0.1
7 years ago
5.0.0
7 years ago
4.0.1
7 years ago
4.0.0
7 years ago
3.0.3
7 years ago
3.0.2
7 years ago
3.0.1
7 years ago
3.0.0
7 years ago
2.1.2
8 years ago
2.1.1
8 years ago
2.1.0
8 years ago
2.0.0
8 years ago
1.0.9
8 years ago
1.0.8
8 years ago
1.0.7
8 years ago
1.0.6
8 years ago
1.0.5
8 years ago
1.0.4
8 years ago
1.0.3
8 years ago
1.0.2
8 years ago
1.0.1
8 years ago
1.0.0
8 years ago