@monstrosity/components v0.43.0-alpha-10

React Component Library

Requires React 16.8+

Themes

Monstrosity ships with two default themes 1. Light 2. Dark

A custom theme can be provided by providing a theme of type Theme. If you are using js you will need to look here for the correct object schema.

The best way to consume these components is by using the provider. This way you get the theme as designed by the creator in either a dark or light mode and with correct fonts.

examples

import { ThemedProvider } from '@monstrosity/utilities/providers/theme';
import { BarButton } from '@monstrosity/components/core';
import { ButtonStyle } from '@monstrosity/enums/button-style';

render() {
  return (
    <ThemedProvider isDark>
        <Container>
            <BarButton
                onClick={onClick}
                buttonStyle={ButtonStyle.Secondary}
                id="1"
                label="Click Me"
            />
        </Container>
    </ThemedProvider>
  )
}

Please note that a single item must be parsed into the provider (due to the way ThemeProvider functions). To use multiple components wrap the children in a parent ie <React.Fragment> ... </React.Fragment>.

Using a component

All components must be wrapped in the styled components theme provider. I recommend that this is done at the highest possible level. The theme property is then passed to every child component behind the scenes.

This can be done by adding a decorator to your storybook config.

addDecorator(( story ) => (
  <ThemeProvider theme={MyTheme}>
    { story() }
  </ThemeProvider>
))

Or in the application root.

class ApplicationRoot extends React.PureComponent {

  render() {
    return (
      <ThemeProvider theme={MyTheme}>
        /* Application */
      </ThemeProvider>
    );
  }
}

With other providers.

class ApplicationRoot extends React.PureComponent {

  render() {
    return (
      <Provider store={MyStore}>
        <ThemeProvider theme={MyTheme}>
          /* Application */
        </ThemeProvider>
      </Provider>
    );
  }
}

However you can also directly supply a theme to a component if you so choose.

<Icon theme={MyTheme} icon={IconName.Folder} />

Or by wrapping a single component in a provider.

<ThemeProvider theme={MyTheme}>
  <Icon icon={IconName.Folder} />
</ThemeProvider>

Button Example

import React from 'react';
import ReactDOM from 'react-dom';

import { BarButton } from '@monstrosity/components/core';
import { ThemeProvider } from '@monstrosity/utilities/themed-components';
import { Light } from '@monstrosity/utilities/themed-components/light';

const Demo = () => { 
  const onClick = (id) => alert(id);

  return (
    <ThemeProvider theme={Light}>
      <BarButton
        id="3"
        label="Click on me"
        onClick={onClick}
        buttonStyle={ButtonStyle.Primary}
        isSlim
      />
    </ThemeProvider>
  )
};

ReactDOM.render(<Demo />, document.getElementById('root'));

Attribution

Avatar Icons made by Freepik from flaticon.com.
Remix Icons by Remix. Bootstrap Icons by Bootstrap.
Font Awesome Free Icons by Font Awesome.
Feather Icons by Feather.

Tyson Skiba 2019