aphro
v0.0.17
Published
User interface React component library built on top of aphrodite
Downloads
11
Maintainers
Readme
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.