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 = <Owl> <Box /> <Box /> <Box /> <Box /> </Owl>
Margin Direction
Use the direction
prop to adjust the direction. Defaults to 'top'
.
<Owl ='right'> <Link /> <Link /> <Link /></Owl>
Margin Size
Use the size
prop to adjust the margin value. Defaults to '1.5em'
.
<Owl ='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> <Link /> <Link /> <Link /> </FlexOwl>)
MIT License