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;