react-owl

🦉 React layout component based on the lobotomized owl selector and built with styled-components * + *

npm i react-owl

import React from 'react'
import Owl from 'react-owl'
import Box from './Box'

const App = props => (
  <Owl>
    <Box />
    <Box />
    <Box />
    <Box />
  </Owl>
)

Margin Direction

Use the direction prop to adjust the direction. Defaults to 'top'.

<Owl direction='right'>
  <Link />
  <Link />
  <Link />
</Owl>

Margin Size

Use the size prop to adjust the margin value. Defaults to '1.5em'.

<Owl size='3em'>
  <Box />
  <Box />
</Owl>

Flexbox

Use the styled-components library to extend the Owl component for things like setting display: flex.

import React from 'react'
import Owl from 'react-owl'
import styled from 'styled-components

const FlexOwl = styled(Owl)`
  display: flex;
`

const Nav = props => (
  <FlexOwl direction='right'>
    <Link />
    <Link />
    <Link />
  </FlexOwl>
)

MIT License