https://github.com/jxnblk/react-owl

:owl: React layout component based on the lobotomized owl selector and built with styled-components
https://github.com/jxnblk/react-owl

Last synced: about 2 months ago
JSON representation

:owl: React layout component based on the lobotomized owl selector and built with styled-components

• Host: GitHub
• URL: https://github.com/jxnblk/react-owl
• Owner: jxnblk
• Archived: true
• Created: 2017-08-23T19:46:45.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2017-08-23T23:40:10.000Z (about 7 years ago)
• Last Synced: 2024-06-14T23:47:30.316Z (3 months ago)
• Language: JavaScript
• Homepage:
• Size: 3.91 KB
• Stars: 42
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

# react-owl

🦉 React layout component based on the [lobotomized owl selector][owl]

and built with [styled-components][sc]

`* + *`

```sh

npm i react-owl

```

```jsx

import React from 'react'

import Owl from 'react-owl'

import Box from './Box'

const App = props => (

  

    

    

    

    

  

)

```

## Margin Direction

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

```jsx

  

  

  

```

## Margin Size

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

```jsx

  

  

```

## Flexbox

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

```jsx

import React from 'react'

import Owl from 'react-owl'

import styled from 'styled-components

const FlexOwl = styled(Owl)`

  display: flex;

`

const Nav = props => (

  

    

    

    

  

)

```

[owl]: https://alistapart.com/article/axiomatic-css-and-lobotomized-owls

[sc]: https://styled-components.com

MIT License