React Scale

About

React Scale is an intuitive UI framework and own powerful customization of your components with CSS-in-JS.

Why?

Look where we are: many excellent libraries can deliver what we want, so we do not reinvent the wheel every time we need to start a human interface, minimally based on known experience. All these libraries show us the plurality we need to move forward as a community. Yet they may also show us that perhaps what we really need is a more intrinsic control of this basis without our having to create everything from scratch.

This design system brings you the ability to change the primary values and that these changes instantly reflect on all components.

Installation

npm install @react-scale/core

Live Playground

For examples of components in action, go to https://leandrojo.github.io/react-scale.

Components

Badges

A simple badge:

<Badge>First Badge</Badge>

A style badge pill:

<Badge pill>First Badge Pill</Badge>

A style type badge like styles buttons:

<Badge type="success">
  Success Badge
</Badge>

<Badge type="danger">
  Danger Badge
</Badge>

Has also pill removable action and size:

<Badge size="sm" removable pill onPress={this.onClear}>
  Telephone
</Badge>

Buttons

A complete buttons props:

<Button onPress={this.onPress}>Default Button</Button>

A style type badge like styles buttons:

<Button type="success" onPress={this.onPress}>
  Success Button
</Button>

<Button type="danger" onPress={this.onPress}>
  Danger Button
</Button>

And sizes:

<Button size="xs" onPress={this.onPress}>
  Telephone
</Button>

<Button size="sm" onPress={this.onPress}>
  Telephone
</Button>

<Button size="lg" onPress={this.onPress}>
  Telephone
</Button>

<Button size="xl" onPress={this.onPress}>
  Telephone
</Button>

Update comming soon.

Custom Theme

import { theme, Button } from "@react-scale/core";

const { registerTheme } = theme;

class Theming extends Component {
  onChangeTheme = ev => {
    registerTheme({
      colors: {
        primary: ev.target.value
      }
    });
  };

  render() {
    const { styles, theme } = this.props;
    return (
      <View {...css(styles.content)}>
        <input
          type="color"
          onChange={this.onChangeTheme}
          value={theme.colors.primary}
        />
        <Button type="primary">Primary Button</Button>
      </View>
    );
  }
}

const style = () => {
  return {
    content: {
      padding: 20
    },
  };
};

export default withStyles(style)(Theming);

Playground Online

https://codesandbox.io/s/m9qxn23w8

Icons

Using icons package react-feather; Feather is a collection of simply beautiful open source icons designed by Cole Bemis.

import * as Icons from 'react-feather';

<Icons.Camera />
<Icons.Mail color="red" />
<Icons.Square color="blue" size={36} />

Roadmap (order by alphabetical)

• Alerts;
• Badges;
• Breadcrumb;
• Buttons;
• ButtonGroups;
• ButtonToolbars;
• DatePicker;
• Divider;
• Dropdowns;
• Icons (external use with react-feather);
• Inputs;
• InputsGroup;
• Menu;
• Modal;
• Panel;
• Popovers;
• Progress;
• Selects;
• Spinners;
• Tabs;
• Text;
• Tooltips;

Tests

npm test