signalfire-reactor

Reactor React Library

React JS Reusable Components

** THIS IS A WIP - DON'T USE ATM **

Components

Based losely on these bootstrap components, but in react and not using any bootstrap styling.

• Button - https://getbootstrap.com/docs/4.4/components/buttons/ [x]
• Alert - https://getbootstrap.com/docs/4.4/components/alerts/ [x]
• Breadcrumb - https://getbootstrap.com/docs/4.4/components/breadcrumb/ [x]
• Dropdown Button - https://getbootstrap.com/docs/4.4/components/dropdowns/#single-button [x]
• Dropdown Split Button - https://getbootstrap.com/docs/4.4/components/dropdowns/#split-button
• Collapse - https://getbootstrap.com/docs/4.4/components/collapse/
• Button Group - https://getbootstrap.com/docs/4.4/components/button-group/
• Card - https://getbootstrap.com/docs/4.4/components/card/ [x]
• Jumbotron - https://getbootstrap.com/docs/4.4/components/jumbotron/
• Navbar - https://getbootstrap.com/docs/4.4/components/navbar/
• Pagination - https://getbootstrap.com/docs/4.4/components/pagination/
• Spinner - https://getbootstrap.com/docs/4.4/components/spinners/

TODO

Lots and lots. Testing, styling, additional components.

USAGE

First import the themeprovider, theme code...

import { ThemeProvider } from 'signalfire-reactor';
import { ThemeClassic } from 'signalfire-reactor';

Then if you want to use our reset, global styles you may import below. You can, of course use you own at this point...

import { GlobalStyle } from 'signalfire-reactor';

Then import the component you want...

import { Alert } from 'signalfire-reactor';

The currently available components are Alert, Breadcrumb, Button, Card, DropButton, Jumbotron

Then wrap the components with a element and pass the theme to it...

<ThemeProvider theme={ThemeClassic}>
...
</ThemeProvider>

Then if you are using the element place this inside ...

<ThemeProvider theme={ThemeClassic}>
    <GlobalStyle/>
</ThemeProvider>

Then place whatever component you want to use inside the element...

<ThemeProvider theme={ThemeClassic}>
    <GlobalStyle/>
    <Alert
        type="info"
        message="An information message"
        items={[{ text: 'Info message 1' }, { text: 'Info message 2' }]}
    />
</ThemeProvider>

DEMO

The library is using storybook so you can fire this up by running the command npm run storybook. The interface should then be available on http://localhost:9001