@allthings/react-view

A fully flexed View component for React.

Usage no npm install needed!

<script type="module">
  import allthingsReactView from 'https://cdn.skypack.dev/@allthings/react-view';
</script>

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>
)