react-status-beacon

Display an animated beacon to indicate an application status such as signal strength, buffer load, location etc.

Live Demo

Install

npm install --save react-status-beacon

Basic Usage

import React from 'react'

import Beacon from 'react-status-beacon'

const ExampleConnectionStatus = () => (
  <p>
    Connection <Beacon status='positive' />
  </p>
)

Speeds

Custom Color Scheme

Props

status

The status you want to indicate with the beacon.

type: String

default: dormant

params: positive, neutral, negative, dormant

speed

Change the speed of the beacon pulse animation. Strings normal, slow, and fast are accepted, or you can also pass in a custom value in millisconds. e.g. 1700

type: String|Number

default: normal ( 1300ms )

params: normal, slow, fast

size

Control the size of the entire element. Any CSS size unit is acceptable, it is passed straight to the wrapper.

type: String

default: 1em

colors

Override default color scheme by passing in a custom hex code for each status. As of this version, only six digit hex codes are supported.

type: Object

default:

{
  positive: '#309D7D',
  neutral: '#FFC800',
  negative: '#D62828',
  dormant: '#666666'
}

scaleBeacon

By default the animation beacon scales down to indicate less intesity depending on the status, shrinking from positive to neutral to negative and non-existent on dormant status. You can disable this behavior by setting this prop to false.

type: Boolean

default: true

License

MIT © Julian1729