Aphro

An unopinionated set of user interface elements for React

[![npm][npm-image]][npm-url]
[![travis][travis-image]][travis-url]
[![standard][standard-image]][standard-url]

[npm-image]: https://img.shields.io/npm/v/aphro.svg?style=flat-square
[npm-url]: https://www.npmjs.com/package/aphro
[travis-image]: https://img.shields.io/travis/bentatum/aphro.svg?style=flat-square
[travis-url]: https://travis-ci.org/bentatum/aphro
[standard-image]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square
[standard-url]: http://npm.im/standard

Install

``
yarn add aphro
`

Setup

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

$3

`js
// 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
`

$3

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

$3

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

render(



document.getElementById('root')
)
`

$3

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

const enhance = withClassNames

export default enhance(({ classNames: cx }) =>



)
``

$3

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