Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A React component with a toggle and a slider for controlling a Philips Hue light
import React from 'react';
import Toggle from 'material-ui/Toggle';
import Slider from 'material-ui/Slider';
const LightItem = (props) => (
<div className='items'>
<div className='item toggle'>
<Toggle
toggled={props.isOn}
label={props.name}
onToggle={() => props.onToggleLight(props.id,props.isOn)}
disabled={!props.reachable}
/>
{props.reachable ? '' : <div className='warning'>not reachable</div>}
</div>
{props.reachable ?
<div className='item slider'>
<Slider
min={0}
max={255}
step={1}
value={props.bri}
onChange={(event,newValue) => props.onBrightnessChanged(props.id,newValue)}
/>
</div> : '' }
</div>
);
export default LightItem;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.