aphro

Aphro

An unopinionated set of user interface elements for React

Install

yarn add aphro

Setup

Aphro makes use of React's context for configuration. Here's an example of a basic configuration.

1. Create a root component

// Theme.js
import * as config from './config'
import PropTypes from 'prop-types'
import { classNames } from 'aphro'

const Theme = props => props.children

Theme.contextTypes = {
  aphro: PropTypes.shape({
    config: PropTypes.object,
    classNames: PropTypes.object
  })
}

Theme.childContextTypes = {
  aphro: { 
    config,
    classNames: classNames(config)
  }
}

export default Theme

2. Create a theme

// config.js
export const Button = {
  extraSmall: {
    height: 10
  },
  small: {
    height: 20
  },
  medium: {
    height: 30
  },
  large: {
    height: 40
  }
}

3. Wrap your application

import Theme from './Theme'
import { render } from 'react-dom'

render(
  <Theme>
    <Application />
  </Theme>
  document.getElementById('root')
)

withClassNames

// Application.js
import { withClassNames } from 'aphro'
import { css } from 'aphrodite/no-important'

const enhance = withClassNames

export default enhance(({ classNames: cx }) =>
  <div className={css(cx.flex)}>
    <div className={css(cx.col8)}>
        Sidebar
    </div>
    <div className={css(cx.col4)}>
      Content
    </div>
  </div>
)

aphro classNames

container flex flexWrap alignFlexStart alignCenter alignFlexEnd justifyFlexStart justifyCenter justifyFlexEnd col{1-12}{xs|sm|md|lg|xl}

Contributing

Contributions welcome! Please read the contributing guidelines first.

License

ISC