Some Examples would be awesome

[RussMax783]

Hey Mikey! I really like the idea of a component such as this to quickly and cleanly provide spacing between components. I like the thought of designing components inwardly and letting parent, containing components dictate spacing. I haven't spent a ton of time looking at the source, but it would be super helpful to have some examples in the readme to see how you specifically use it.

[mikeyamadeo]

Hi Russ! haha you found it! Yes as you can see I spent more time on the image than the actual documentation. One of the reasons is I'm currently not finalized on the API. I'm going back and forth between making this customizable and flexible vs opinionated. Would love your input!

Some API considerations:

1.) Current API

/**
 * By default the space modifiers are 0, 1, 2, 3, 4 and the spacing values
 * start at 6px and goes up w/ fibonacci scaling,
 * So...
 * p1: 6px, p2: 12px, p: 18px, p3: 30px, p4: 48px
 */
import ___, {config} from 'react-space'
const ___2 = config({
  scale: 'linear',
  base: 4,
  sizeSymbols: [
    '__',
    '_'
    '',
    '$',
    '$$'
  ]
})

const DefaultExample = ({renderNarrow}) =>
  <div>
     <___ p m>standard padding & margin (18px)</___>
     <___ ph4 mv1>giant (48px) horizontal padding and tiny (6px) vertical margin</___>
     <___ pt0 ml0={renderNarrow}>no padding top and no margin left if rendering narrow</___>
  </div>

const CustomExample = ({renderNarrow}) =>
  <div>
     <___2 p m>standard (16px) padding & margin</___2>
     <___2 ph$$ mv__>giant (64px) horizontal padding and tiny (4px) vertical margin</___2>
     <___2 pt0 ml0={renderNarrow}>no padding top and no margin left if rendering narrow</___2>
  </div>

2) More opinionated / straightforward api(s)

import ___ from 'react-space'

const StringBasedApi = ({renderNarrow}) =>
  <div>
    <___ _='p m'></___>
    <___ _='ph++ pb+ mv-- mt-'></___>
    <___ _={cn({
      'pt0': true,
      'ml0': renderNarrow
     })}></___>
  </div>

const StringBasedApi2 = ({renderNarrow}) =>
  <div>
    <___ p='2' m='2'>Standard</___>
    <___ px='4' my='0'>giant horizontal padding and tiny vertical margin</___>
    <___ pt={renderNarrow ? '0' : '2'}></___>
  </div>

The other thing to consider here is that it's nice to combine spacing w/ layout in a single element so rather than doing something like:

const LayoutSeparateFromSpacing = () =>
   <___ m p>
     <X x y>
       <span>Absolutely</span>
       <span>Centered</span>
       <span>Row</span>
     </X>
  </___>

const LayoutPlusSpacing = () =>
  <X x y m p>
     <span>Absolutely</span>
     <span>Centered</span>
     <span>Row</span>
  </X>

This could be achieved by composition, but also it might just be better to publish a singled module. Or publish a "spacing api" utility to make it easy for other components to add the spacing api to it's own.

So I just dumped everything I got on ya. Would value your opinions!

[RussMax783]

Hey the images is pretty sweet though! haha I really love this idea, i'll play around with it and get more familiar with it this weekend so i can give you some feedback where i know what I'm actually talking about.

Initial thoughts though; is I do like the idea of a component with layout plus spacing, as those more often then not, go together (but if that complicates things and makes the components look bloated, i personally would prefer them broken up, I'm a sucker for code aesthetics, and if it requires more text or an extra line of code, I'm all for it!)

I definitely think you'll need some sort of way to configure the spacing scale, because thats definitely project specific. Then to add more complexity, there is responsiveness... where margins might be 20px on mobile and 40px on desktop. I don't know if you've taken that into account in here?