react-speedometer

v0.1.2

Published

2 years ago

Cool speedometer for React

Downloads

876

0High
0Medium
0Low

lucassaid

speedometer speed cool react react-component circular-progress thermostat clock

Cool Speedometer 😎

If you are tired of all those boring speedometers for react, have a look at this one. This is different. This is cool.

Cool speedometer

✅ Flexible

✅ 0 dependencies

✅ Performant

✅ Support for negative numbers

✅ Made out of SVG

✅ More customization than you'll use

✅ Cool 😎

Install it for free:

npm i react-speedometer

Usage

Default speedometer

import Speedometer, {
  Background,
  Arc,
  Needle,
  Progress,
  Marks,
  Indicator,
} from 'react-speedometer';

// a few lines later ...

<Speedometer
  value={128}
  fontFamily='squada-one'
>
  <Background />
  <Arc/>
  <Needle/>
  <Progress/>
  <Marks/>
  <Indicator/>
</Speedometer>

That's it, you can play around changing some of the components inside <Speedometer>. Take in mind the order of them matters: <Background> is first because it is meant to be behind all other components.

sizing

By default, the size of the component is 250. You can resize it by passing a different width. You can also change the height, if you need a proportion other than 1:1.

Examples

Playing with angle

Half speedometer

<Speedometer
  value={54}
  max={80}
  angle={160}
  fontFamily='squada-one'
>
  <Background angle={180} />
  <Arc/>
  <Needle/>
  <Progress/>
  <Marks/>
  <Indicator>
    {(value, textProps) => (
      <Text
        {...textProps}
        fontSize={60}
        fill="#555"
        x={250 / 2}
        y={210}
        textAnchor="middle"
        fontFamily='squada-one'
      >
        {value}k/m
      </Text>
    )}
  </Indicator>
</Speedometer>

Rotated

Changing rotation, step, the looking of <Needle/>, and adding <DangerPath/>:

Rotated speedometer

<Speedometer
  value={5}
  max={11}
  fontFamily='squada-one'
>
  <Background />
  <Arc arcWidth={4} />
  <Needle
    baseOffset={40}
    circleRadius={30}
  />
  <DangerPath/>
  <Progress arcWidth={10} />
  <Marks step={1} />
</Speedometer>

If speed is not your thing

Circular progress

See code

Thermostat

See code

God mode

When I said "more customization than you'll use", I meant it.

Custom marks

Pass a function as children to render your own marks. This function receives:

coordinates
Coordinates of the current line: { x1, y1, x2, y2 }. Either pass them to a <Line> component, or use them to create whatever you like, as long as it is made of SVG.
textProps
Coordinates and rotation for the text: { x, y, transform }. It is recommended you apply this object to a <Text> element.
value
The value of this mark.

import { Line } from 'react-native-svg'
// later ...
<Marks step={5}>
  {(mark, i) => (
    <G key={i}>
      <Line
        {...mark.coordinates}
        // any other prop here, except x1, y1, x2, and y2
      />
      {(i % 2 == 0) && (
        // only show the number if the mark is even
        <Text
          {...mark.textProps}
          // any other prop here, except x, y, and transform
        >
          {mark.value}
        </Text>
      )}
    </G>
  )}
</Marks>

Custom needle

Pass a function as children to make a custom needle. It will rotate automatically.

<Speedometer width={width}>
  <Needle>
    {() => {
      // you might need the center of the circle
      // to place the needle correctly
      const center = width / 2

      return (
        // some magic SVG here
      )
    }}
  </Needle>
</Speedometer>

Custom indicator

Pass a function as children to make a custom indicator. You can use this to place the indicator in the center of the circle:

<Speedometer width={width}>
  <Indicator>
    {(value, textProps) => (
      <Text
        {...textProps} // textProps has the "transform" property only
        fontSize={40}
        x={width / 2}
        y={width / 2 + 10}
        textAnchor="middle"
        alignmentBaseline="middle"
      >
        {value}
      </Text>
    )}
  </Indicator>
</Speedometer>

useSpeedometerContext

You can achieve virtually anything you need by adding a component that uses this hook and returns SVG:

const MyCustomSVG = () => {

  const {
    currentFillAngle,
    radius,
    rotation,
    min,
    max,
    angle,
    lineCap,
    accentColor,
    fontFamily,
    value,
  } = useSpeedometerContext();

  return (
    // some magic SVG here
  )
}

const App = () => {

  return (
    <Speedometer>
      <Background />
      <Needle />
      <MyCustomSVG />
    </Speedometer>
  )
}

Just SVG

It is possible to wrap any component inside a <G> tag and add more vectors:

<Speedometer>
  <G opacity={0.4}>
    <Needle/>
  </G>
  <Line />
  <Polygon />
</Speedometer>

Properties

Background

Arc

Needle

DangerPath

Progress

Marks

Indicator