React Thermostat

A react thermostat which can be easily plugged into any smart home application, I've used this with Home Assistant connecting to websockets for a standalone smart home application and it's working great.

Online Demo

Help me out?

I've spent a lot of time on this, you're free to use it but would appreciate a small donation if you're feeling generous! Buy me a beer!

Buy me a beer!

Install

  npm i react-thermostat

Example

The size of the thermostat is relative to it's parent and automatically will adjust on resize, you can also set the size of the thermostat by setting the width of the parent container.

import React, { useState } from 'react';
import styled from '@emotion/styled';
import { Thermostat } from 'react-thermostat';
const Container = styled.div`
  width: 100%;
  max-width: 300px;
`;
const App = () => {
    const [value, setValue] = useState(50);
    return (
      <Container>
        <Thermostat
          value={value}
          onChange={ newValue => setValue(Number(newValue.toFixed(0))) }
        />
      </Container>
    )
};
export default App;

Main Props

| prop | type | required | default | description | |-------------|------------------------------|----------|------------------------------|--------------------------------------------------------------------------------------------------| | value | number | yes | | The value for the thermostat | | onChange | (value: number) => void | yes | | Called when a user interacts with the handle, you should update your value with this callback, this value is NOT rounded intentionally. | | valueSuffix | string | no | ° | The suffix for the value, use '' if you don't want a suffix | | min | number | no | 0 | The minimum value for the thermostat | | max | number | no | 100 | The maximum value for the thermostat | | handle | HandleProps | no | HandleProps | The props for the dragging handle | | disabled | boolean | no | false | If the thermostat should be disabled | | track | TrackProps | no | TrackProps | The props for the track |

Handle Props

| prop | type | required | default | description | |--------|--------------------------------|----------|--------------------------------|----------------------------| | size | number | no | size / 15 | The size of the handle | | colors | HandleColors | no | HandleColors | The colours for the handle |

Handle Colors

| prop | type | required | default | description | |--------|--------|----------|-----------------|-------------------------------------------------| | handle | string | no | #fff | The background color of the handle | | icon | string | no | #111 | The color of the icon in the handle | | pulse | string | no | rgba(0,0,0,0.3) | The color of the pulse effect behind the handle |

Track Props

| prop | type | required | default | description | |-----------|---------------------------|----------|---------------------------|------------------------------------------------------------------------------------------------------------------------------------| | colors | string[] | no | ['#cfac48', '#cd5401'] | The colours of the track gradient, from left to right, this can be one or many colours and will apply in a conical gradient effect | | thickness | number | no | size / 10 | The thickness of the main arc track, the inner thermometer will divide it's track size by 1.4 | | markers | Markers | no | Markers | The options for the markers on the arc track, this is really only for advanced control |

Markers Props

| prop | type | required | default | description | |----------------|---------|----------|---------------------|---------------------------------------------------| | enabled | boolean | no | true | If the markers on the arc track should be enabled | | every | number | no | 5 | Every 5 ticks will be the "main" mark | | count | | no | 60 | The number of marks to include on the arc | | main.color | string | no | black | The colour of the main mark | | main.length | number | no | track.thickness / 4 | The length of the mark | | main.thickness | number | no | 2 | The thickness of the mark | | sub.color | string | no | rgba(0,0,0,0.8) | The colour of the sub mark | | sub.length | number | no | track.thickness / 8 | The length of the sub mark | | sub.thickness | number | no | 1 | The thickness of the sub mark |

Developer

Once the repository has been checked out, simply run npm run dev which will spawn a local webserver.

Any changes made in the src direction will appear in the demo page created.

Publishing

This is a very simple package setup, no tagging in place for now, increment the package version, npm run build and push all your changes then run npm publish