0.0.17 • Published 7 years ago
aphro v0.0.17
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.