Package Exports

react-status-beacon

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-status-beacon) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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