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