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