npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@queckezz/rebass

v0.2.6

Published

Configurable React Stateless Functional UI Components

Downloads

4

Readme

Rebass

Configurable React Stateless Functional UI Components

Build Status Code Climate

http://jxnblk.com/rebass

Features

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.

MIT License