Skip to content

Instantly share code, notes, and snippets.

@monokrome
Created December 3, 2017 13:10
Show Gist options
  • Save monokrome/28d6693e678181167a8fd0904bd64a7d to your computer and use it in GitHub Desktop.
Save monokrome/28d6693e678181167a8fd0904bd64a7d to your computer and use it in GitHub Desktop.
import React from 'react'
import styled from 'styled-components'
function flex(name, defaultValue) {
return (props) => {
let value = props[name]
if (!value && typeof defaultValue === 'undefined') return ''
if (!value) value = defaultValue
return `flex-${name}: ${value};`
}
}
function Flex(props) {
const { className, children } = props
return <div className={className}>{children}</div>
}
export default styled(Flex)`
display: flex;
${flex('direction')}
${flex('basis')}
> * { ${flex('grow')} }
height: 100%;
width: 100%;
`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment