prefixed-rebass
v0.3.1
Published
Configurable React Stateless Functional UI Components
Downloads
1
Maintainers
Readme
Rebass
Configurable React Stateless Functional UI Components
http://jxnblk.com/rebass
Features
- Uses inline styles
- No CSS dependencies
- No leaky global styles
- Presentational components work with any application architecture
- Configurable with React Context
- Great for prototyping
- Production ready
- Tested
Rebass is a React UI component library that uses inline styles to avoid CSS dependencies and prevent leaky global styles from affecting an application. Rebass components are built as stateless functional components and modeled as presentational components. With unit tests for each component, Rebass is great for prototyping and ready for production.
Getting Started
npm i rebass
import React from 'react'
import { Button, Badge } from 'rebass'
class App extends React.Component {
render () {
return (
<App>
<Button>Button</Button>
<Badge>Badge</Badge>
</App>
)
}
}
Component Documentation
Each component exposes a simple API of props. View the source code or see http://jxnblk.com/rebass for more information.
Architectural Approach
Rebass is built around a component architectural approach inspired by Dan Abramov’s Presentational and Container Components, where presentational components are the only ones that encapsulate styles and contain no application logic, and container components do not contain any styles or DOM markup and handle all the application logic.
Rebass only contains presentational components, which means controlling things like progressive disclosure mechanisms or dropdown menus should be handled at a higher level in container components. Therefore, Rebass itself does not require any client-side JavaScript, is well suited to server-side rendering, and can fit into virtually any higher level application architecture.
Configuration
Global theme styles are set using React Context. This means that the default global styles can be configured, and component-specific styles can be added to customize on a per-component basis.
View the demo to see some configuration options in action.
To configure the theme, add childContextTypes
and getChildContext
to your root component.
class App extends React.Component {
static childContextTypes = {
rebass: React.PropTypes.object
}
getChildContext () {
return {
rebass: {
colors: myCustomColors,
fontSizes: [ 64, 48, 24, 18, 16, 14, 12],
Button: {
backgroundColor: 'tomato'
}
}
}
}
render () {
// ...
}
}
After setting context in the root component, all instances of Rebass components will use these values throughout the app.
For reference to the default values, see /src/config.js
.
To alter per-component styles, pass a style object that matches the name of the component,
like the Button
object in the example above.
Per-Instance Overrides
Components accept overrides using the style
prop to handle any one-off situations.
For example, to remove the margin bottom from an Input for a particular situation, do the following
<Input
name='input_name'
label='Input Label'
style={{ border: 0 }} />
Base Styles
Rebass components inherit styles where appropriate.
Set your own base styles for color and fonts to customize the overall look and feel of an application.
It's recommended that you use * { box-sizing: border-box }
and set line-height: 1.5
on the body.
Example
* { box-sizing: border-box}
body {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
line-height: 1.5;
color: #111;
background-color: #fff;
}
Styling with CSS
Although it's not recommended to use extensively, components can be styled with CSS.
Each component has a className that matches the component name.
To control things like button hover styles, this can be a convenient way to style pseudo-classes.
Note, that due to the use of inline styles, some properties may need to be overridden with an !important
flag.
.Button:hover {
box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.125);
}
Note: Unlike previous versions, Rebass is no longer explicitly associated with Basscss, but shares a similar approach to application-agnostic UI development.