ayla-widget-color-bulb
v0.0.15
Published
This is a re-usable Color Bulb Widget
Downloads
20
Readme
ayla-widget-color-bulb
This is a re-usable Color Bulb Widget
Install
npm install --save ayla-widget-color-bulb
#Add the below tag in index.html
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
Example:
import React, { useEffect, useState } from 'react';
import WidgetColorBulb from 'ayla-widget-color-bulb';
function App() {
const [power, setPower] = useState("on"); // on/off
const [brightness, setBrightness] = useState(50);
const [temperature, setTemperature] = useState("green");
const widgetConfig = {
power: {
iconColorOn: 'blue',
iconColorOff: 'rgba(0, 0, 0, 0.5)'
},
slider: {
min: 10,
max:100,
step: 1
},
brightness: {
brightnessLowIconColor: 'black',
brightnessHighIconColor: 'black',
brightnessLowIconFrontWeight: '100',
brightnessHighIconFrontWeight: '500',
brightnessBarColor: '#abe2fb',
brightnessHandleColor: '#ffffff',
brightnessValueFontSize: '20px',
brightnessValueFontColor: 'black',
brightnessValueFontWeight: '400',
},
temperature: [
{ name: 'green', color: 'green' },
{ name: 'blue', color: '#0000ff' },
{ name: 'orange', color: 'orange' },
{ name: 'yellow', color: 'yellow' },
{ name: 'red', color: 'red' },
]
}
const getWidgetData = (prop, value) => {
if(prop == 'power') {
setPower(value)
}
if(prop == 'brightness') {
setBrightness(value)
}
if(prop == 'temperature') {
setTemperature(value)
}
}
return (
<div className="App">
<WidgetColorBulb power={power} brightness={brightness} temperature={temperature} widgetConfig={widgetConfig} emitWidgetData={getWidgetData} />
</div>
);
}
export default App;