massiv-ui

a collection of react components

description

massiv-ui is a themeable react ui library.

please note that the components will only work correctly if the components are wrapped in a Theme component. You can use the defaultTheme provided by massiv-ui or you can specify your own theme.

example index.js:

import React from "react";
import { render } from "react-dom";
import { Provider } from "react-redux";
import store from "./yourStore.js";
import { Theme, defaultTheme, Text, Button } from 'massiv-ui';

const Root = () => {
    return (
        <Provider store={store} >
            <Theme theme={defaultTheme} >
                <div>
                    <Text>Example on how to use massiv-ui library</Text>
                    <Button color="success" icon="code" onClick={() => alert('clicked')}>Got it!</Button>
                </div>
            </Theme>
        </Provider>
    );
}

render(<Root />, document.getElementById("root"));

please use the following structure for your theme if you are using your own:

{
    // meta informations go here
    meta: {
        iconPrefix: 'fa fa-',
        postFix: ' fa-fw'
    },

    // media queries go here (values are passed to min-size)
    // s is from 0px to m, m is from m to l, etc
    // so the first media query you need is of size m
    screen: {
        m: '550px',
        l: '850px',
        xl: '1200px'
    },

    // all colors need to be specified here
    color: {
        black: '#202021',
        white: '#F7F7F7',
        primary: '#607D8B',
        primaryLight: '#CFD8DC',
        primaryDark: '#455A64',
        accent: '#FF5252',
        primaryText: '#212121',
        secondaryText: '#757575',
        divider: '#BDBDBD',

        default: '#BDBDBD',
        success: '#37B661',
        info: '#48C5FC',
        warning: '#DD9913',
        error: '#E25650'
    },

    // all sizes need to be specified here
    scale: {
        xs: '0.5rem',
        s: '0.8rem',
        m: '1rem',
        l: '1.5rem',
        xl: '2rem',
        xxl: '2.5rem',
        xxxl: '3rem'
    }
}

icons

massiv-ui is designed to use the icon library of your choice. By default there is no icon library included. You will need to include your own. Once you have loaded your icon library you can specify pre- and postfix in your theme and then use the components that support icons, like Icon and Button.