README
react-view
A View
component heavily inspired by angular-material's layout.
Install
yarn add @allthings/react-view
Available properties
Property | Type | Possible values |
---|---|---|
direction |
string | row , column |
alignH |
string | none , start , center , end , space-around , space-between |
alignV |
string | none , start , center , end , stretch |
wrap |
string | inherit , initial , wrap , nowrap , wrap-reverse |
fill |
bool | true , false |
flex |
string/int | none , flex , nogrow , grow , initial , auto , noshrink , 5 , 10 , 15 , 20 , 25 , 30 , 35 , 40 , 45 , 50 , 55 , 60 , 65 , 70 , 75 , 80 , 95 , 90 , 100 , 33 , 66 |
Example usage
const styles = {
background: '#bada55',
padding: 10
}
const ExampleComponent = props => (
<View
direction="row"
alignH="center"
alignV="center"
wrap="wrap"
style={styles}
>
Hello World!
</View>
)