#react-ditto
Transform layout to take whatever form you please without leaving the render method.
const spacingPropTypes = PropTypes.oneOf([
0, '0', // none
'--', // tiny
'-', // small
true, // standard
'+', // big
'++' // giant
])
const axisPropTypes = PropTypes.oneOf([
false, // (Default) place at "start" of given axis (far left [x] or top [y])
true, // center across given axis
'end' // place at "end" of given axis (far right [x] or bottom [y])
])
const sizingPropTypes = PropTypes.string
const api = {
// layout api
x: axisPropTypes,
y: axisPropTypes,
space: PropTypes.oneOf([
'between', // |x x x|
'around' // | x x x |
]),
wrap: ProptTypes.oneOf([
false, // squish all chilrdren to fit space
true, // overflow children underneath
'reverse' // overflow children above
]),
reverse: PropTypes.onOf({
true,
false
})
// spacing api
p: spacingPropTypes, // padding
pt: spacingPropTypes, // padding top
pr: spacingPropTypes, // padding right
pb: spacingPropTypes, // padding bottom
pl: spacingPropTypes, // padding left
px: spacingPropTypes, // horizontal padding
py: spacingPropTypes, // vertical padding
m: spacingPropTypes, // margin
mt: spacingPropTypes, // margin top
mr: spacingPropTypes, // margin right
mb: spacingPropTypes, // margin bottom
ml: spacingPropTypes, // margin left
mx: spacingPropTypes, // horizontal margin
my: spacingPropTypes, // vertical margin
// sizing api
size: sizingPropTypes,
height: sizingPropTypes,
maxHeight: sizingPropTypes,
minHeight: sizingPropTypes,
width: sizingPropTypes,
maxWidth: sizingPropTypes,
minWidth sizingPropTypes,
}
| prop | result |
|---|---|
| row |  |
- layout
- spacing
- sizing
Quick L👀 ks
Example set 1: Intro to layout or "axis" api by getting our Psyducks in a row
import __ from 'react-ditto'
// align psyducks in a row
const Psyducks = () =>
<__ row>
<Psyduck /> <Psyduck /> <Psyduck /> <Psyduck />
</__>
import __ from 'react-ditto'
// center the row of psyducks along the x axis
const Psyducks = () =>
<__ row cx>
<Psyduck /> <Psyduck /> <Psyduck /> <Psyduck />
</__>
import __ from 'react-ditto'
// absolutely center the row of psyducks along both x & y axis
const Psyducks = () =>
<__ row cx cy>
<Psyduck /> <Psyduck /> <Psyduck /> <Psyduck />
</__>
import __ from 'react-ditto'
// center along y axis while placing space _between_ row of psyducks
const Psyducks = () =>
<__ row cy spaceBetween>
<Psyduck /> <Psyduck /> <Psyduck /> <Psyduck />
</__>
import __ from 'react-ditto'
// center along y axis while placing space _around_ row of psyducks
const Psyducks = () =>
<__ row cy spaceAround>
<Psyduck /> <Psyduck /> <Psyduck /> <Psyduck />
</__>
import __ from 'react-ditto'
// render psyducks as a column (with space _around_) and center along the x axis
const Psyducks = () =>
<__ col cx spaceAround>
<Psyduck /> <Psyduck /> <Psyduck /> <Psyduck />
</__>
import __ from 'react-ditto'
// render psyducks in a column (with space _around_) and wrap as room requires
const Psyducks = () =>
<__ col cx spaceAround wrap>
<Psyduck /> <Psyduck /> <Psyduck /> <Psyduck />
</__>
Example set 2: Getting a flavor for the spacing api by helping Snorlax protect his candy
First, let's get as far away from Haunter as we can by applying large left margin margin
import __ from 'react-ditto'
// apply size level 5 (largest on scale from 0-5) margin to the left
const SnorlaxAndCandy = () =>
<__ ml5>
<Snorlax />
<Candy />
</__>
Now we'll give Snorlax some breathing room from Zapdos and Sandslash by applying top and bottom padding
import __ from 'react-ditto'
// apply size level 3 (scale from 0-5) amount of padding to top (pt) and bottom (pb)
const SnorlaxAndCandy = () =>
<__ X pt3 pb3>
<Snorlax />
<Candy />
</__>
Finally, ever use the padding shorthand to apply it only vertically or horizonally (e.g. padding: 10px 0)? You can do similarly here. Let's apply this snorlax's vertical padding via shorthand:
import __ from 'react-ditto'
// apply padding along the 'y' axis
const SnorlaxAndCandy = () =>
<__ row py3>
<Snorlax />
<Candy />
</__>This shorthand works for both margin and padding.
###Example set 3: Putting it all together
Let's say we want to render our pokemon go team:
import React from 'react'
import { render } from 'react-dom'
import ___ from 'react-ditto'
import { pokemon } from './examples/data'
const HealthBar = ({percentHealth}) =>
<__ width='100%' height='6px'>
<__ width={`${percentHealth}%`} height='100%'
style={{backgroundColor: percentHealth < 25
? '#d34f4f' // red
: percentHealth < 50
? '#f4d554' // yellow
: '#6deeb6' // green
}} />
</__>
const PokemonList = ({pokemon}) =>
<__ row wrap spaceBetween px2 tag='ul' maxWidth='380px'>
{pokemon.map(p =>
<__ col cx px1 my2 tag='li' >
<h2>cp { p.cp }</h2>
<img src={ p.img } height='90px' />
<__ tag='h4' mb1>{ p.name }</__>
<HealthBar percentHealth={ (p.health / p.maxHealth) * 100 } />
</__>
)}
</__>
render(<PokemonList pokemon={pokemon} />, document.getElementById('root'))
