When using the React hook useGrid you get an array of two values. The first one indicates whether the element should be rendered. The second one are the props to use. For instance, if we wanted to turn an h1 into a Grid element we could do:

import { useGrid } from 'gymnast'

function MyComponent(props) {
  const [shouldShow, allProps] = useGrid(props)

  return shouldShow ? null : <h1 {..allProps} />
}

Once the inner component uses the props passed by useGrid it behaves just like any other <Grid /> component.

Note that any non gymnast-specific properties will be passed through to the returned props.

To view the full API check the Grid section.