asGrid

To use the HOC asGrid you can wrap any component with it. For instance, to make a h1 HTML element work within the grid you could do:

JavaScript

import { asGrid } from 'gymnast'

const H1 = asGrid('h1')

You can also wrap any other React component. This is convenient to export a styleguide as both, a gymnast-compatible one and one that does not follow the Grid (with fixed component sizes):

JavaScript

import { asGrid } from 'gymnast'
import styleguide from './myStyleguide'

export default Object
  .keys(styleguide)
  .reduce((acc, name) => ({
    ...acc,
    [name]: asGrid(styleguide[name])
  }), {}) 

Once the component is wrapped in asGrid it behaves just like any other <Grid />. To view the full API check the Grid section.

mapProps

asGrid takes an optional second parameter for modifying Grid behavior. This feature can be used for building your own custom Grid components that employ useful defaults.

For example, asCol uses asGrid internally to set custom defaults based on the props being passed.

Example Usage:

JavaScript

import { asGrid } from 'gymnast'

export default function() {
  return asGrid('strong', props => {
    // prevent usage of margin
    return {
      ...props,
      margin: undefined
    }
  })
}