BlockContainer

Table of Contents

• Description
• Code
• Parameters
• Code Sandbox

Description

The Jaen BlockContainer enable you to integrate editable blocks and to use as many of them as you like. In order to use this field you are required to build a block. You can find an example of a block here.

Code

import {BlockContainer, JaenTemplate} from '@snek-at/jaen-pages'
import {CardBlock} from '...'

const HomePage: JaenTemplate = () => {
  return (
    <div style={{width: '50%'}}>
      <BlockContainer
        reverseOrder={false}
        name="home-blockcontainer"
        blocks={[CardBlock]}
	wrap={true}
	wrapProps={{justify: 'center', spacing: '5'}}
      />
    </div>
  )
}

HomePage.TemplateName = 'HomePage'

export default HomePage

Chakra UI Wrap Example

This example displays five boxes of varying colors with a 1 rem space between them in a flex that goes into the next row if the content is too wide. It also centers the boxes.

import {Wrap, Box} from '@chakra-ui/react'
import {fields} from '@snek-at/jaen-pages'


const Component = () => {
  return(
    <Wrap spacing="1rem" justify="center">
      <Box boxSize="300px" bg="red"/>
      <Box boxSize="300px" bg="teal"/>
      <Box boxSize="300px" bg="orange"/>
      <Box boxSize="300px" bg="blue"/>
      <Box boxSize="300px" bg="green"/>
    </Wrap>
  )
}

Parameters

Property	Type	Required	Description
name	string	yes	The name requires you to give the field an identifier that is unique on that page. It is advisable to use descriptive names for fetching purposes.
blocks	array	yes	With the blocks array you can decide which blocks will be in the streamfield. If you add multiple blocks you will get a dropdown menu to choose which block you want to add.
reverseOrder	boolean	no	With the reverseOrder parameter you can decide whether you want to have the blocks first in first out (false) or first in last out (true).
wrap	boolean	no	The wrap property allows you to wrap your blocks into a Chakra UI wrap so that they will wrap when they reach the width of the viewport.
wrapProps	object	no	Passing the BlockContainer wrapProps allows you to set the props of the wrap as required.

Code Sandbox

WIP