0.0.15 • Published 11 months ago
ayla-widget-color-bulb v0.0.15
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,GRAD@20..48,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;
0.0.15
11 months ago
0.0.14
11 months ago
0.0.13
11 months ago
0.0.12
11 months ago
0.0.11
11 months ago
0.0.10
11 months ago
0.0.9
11 months ago
0.0.8
11 months ago
0.0.7
11 months ago
0.0.6
11 months ago
0.0.5
11 months ago
0.0.4
11 months ago
0.0.3
11 months ago
0.0.2
11 months ago
0.0.1
11 months ago
0.1.1
11 months ago
0.1.0
11 months ago