rebass-native

    2.2.1 • Public • Published

    Rebass-native

    Port of Rebass for react-native, a UI component library & design system, built with styled-system, with support for styled-components.

    Build Status Coverage Downloads Version

    npm i rebass-native

    See Demo

    Rebass-native is a port of Rebass, a library of highly-composable, primitive UI components for React, built with styled-components to keep styles isolated and reduce the need to write custom Styles in your application. Based upon a configurable design system, Rebass‘s props API makes building consistent, responsive web apps simpler and faster.

    Getting Started

    import React from 'react'
    import { Provider, Heading, Button } from 'rebass-native'
     
    const App = props => (
      <Provider>
        <Heading>Hello</Heading>
        <Button>Rebass</Button>
      </Provider>
    )

    Features

    • Kickstart your own react-native component library
    • Responsive style props from styled-system
    • Flexbox grid with native-grid-styled
    • Support for styled-components
    • Functional stateless UI components
    • Configurable theming
    • Extensible base components
    • Design-system based consistency
    • Built for responsive web design

    Documentation

    CodeSandbox

    Try it out:

    https://snack.expo.io/@git/github.com/hermanya/rebass-native:examples/app

    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.

    See Patterns for Style Composition in React for more on some of the thought behind Rebass.

    Related


    Contributing | MIT License

    Install

    npm i rebass-native

    DownloadsWeekly Downloads

    46

    Version

    2.2.1

    License

    MIT

    Unpacked Size

    205 kB

    Total Files

    185

    Last publish

    Collaborators

    • hermanya