react-statusbar

A simple React library for beautiful status bars.

Usage

Install react-statusbar from NPM, using your favorite package manager:

``sh
yarn add react-statusbar


or...


npm install react-statusbar
`

And you can now add the statusbar to your project using:

`tsx
import 'react-statusbar/dist/statusbar.css';
import * as Statusbar from 'react-statusbar';

left={Hello, world!}
right={Hello!}
/>;
`

> IMPORTANT: Make sure to import the CSS file, as shown above.

Available components

$3

The main statusbar component, it provides layout and CSS variables to other components.

`tsx

`

$3

A basic text component.

`tsx
Hello, world!
`

$3

A basic button component.

`tsx
alert('Hello!')}>
Hello, world!

`

$3

A dropdown menu component.

`tsx
options={[
{
key: 'test',
label: 'Test',
onClick: () => alert('test')
},
{
key: 'separator-test',
type: 'separator'
},
{
key: 'test2',
label: 'Test 2',
onClick: () => alert('test 2')
}
]}
>
Dropdown

`

$3

A progress bar component. If the value and max properties are undefined, this will show a marquee animation.

`tsx

``