https://github.com/leandrojo/react-scale
An imperative, but customizable, library UI for React.
https://github.com/leandrojo/react-scale
bootstrap css-in-js customizable react react-components ui-components
Last synced: 27 days ago
JSON representation
An imperative, but customizable, library UI for React.
- Host: GitHub
- URL: https://github.com/leandrojo/react-scale
- Owner: leandrojo
- License: mit
- Created: 2018-12-23T01:44:34.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-10-05T23:51:35.000Z (almost 4 years ago)
- Last Synced: 2024-05-29T06:55:55.981Z (about 2 years ago)
- Topics: bootstrap, css-in-js, customizable, react, react-components, ui-components
- Language: JavaScript
- Homepage: https://leandrojo.github.io/react-scale
- Size: 3 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Scale
[](https://circleci.com/gh/leandrojo/react-scale/tree/master)
[](https://www.npmjs.com/package/@react-scale/core)
## 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:
```jsx
First Badge
```
A style badge pill:
```jsx
First Badge Pill
```
A style type badge like styles buttons:
```jsx
Success Badge
Danger Badge
```
Has also pill removable action and size:
```jsx
Telephone
```
### Buttons
A complete buttons props:
```jsx
Default Button
```
A style type badge like styles buttons:
```jsx
Success Button
Danger Button
```
And sizes:
```jsx
Telephone
Telephone
Telephone
Telephone
```
Update comming soon.
### Custom Theme
```jsx
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 (
Primary Button
);
}
}
const style = () => {
return {
content: {
padding: 20
},
};
};
export default withStyles(style)(Theming);
```
#### Playground Online
https://codesandbox.io/s/m9qxn23w8
### Icons
Using icons package [react-feather](https://github.com/carmelopullara/react-feather); Feather is a collection of simply beautiful open source icons designed by [Cole Bemis](https://github.com/colebemis/).
```jsx
import * as Icons from 'react-feather';
```
## Roadmap (order by alphabetical)
- [x] Alerts;
- [x] Badges;
- [x] Breadcrumb;
- [x] Buttons;
- [ ] ButtonGroups;
- [x] ButtonToolbars;
- [ ] DatePicker;
- [x] Divider;
- [ ] Dropdowns;
- [x] Icons (external use with `react-feather`);
- [ ] Inputs;
- [ ] InputsGroup;
- [ ] Menu;
- [ ] Modal;
- [ ] Panel;
- [ ] Popovers;
- [ ] Progress;
- [ ] Selects;
- [x] Spinners;
- [ ] Tabs;
- [x] Text;
- [ ] Tooltips;
## Tests
`npm test`