Themes

There are 11 themes of bricks available:

red  green  amber  orange  blue  cobalt
cyan  purple  teal  dark  yellow

Usage

<Brick theme={theme} />

// red, green, amber, orange, blue, cobalt,
// cyan, purple, teal, dark, yellow
<Brick theme='cyan' />

Sizes

There are 4 sizes of bricks available:

small  medium  wide  large

Usage

<Brick size={size} />

// small, medium, wide, large
<Brick size='wide' />

Icons

An icon is displayed at the center of the brick.

Usage

<Brick icon={icon} />

// specify a string as image source
<Brick icon='your/icon/path.png' />

// use JSX as icon
<Brick icon={<img src='your/icon/path.png' />} />

Name / Badge

Name and Badge are located at the bottom of the brick.

Usage

<Brick name={name} badge={badge} />

// badge could be number or string
<Brick name='My App Name' badge={123} />

// or make a JSX badge
<Brick name='My App Name'
    badge={<img src='your/icon/path.png' />} />

Background

Instead of setting a Theme, you can provide an image as background.

Unless it's a small brick, the icon will be placed in the Badge position.

Usage

<Brick bkg={bkg} />

<Brick bkg='your/background/path.png' />

Message

You can display custom message and display duration in the brick.

This will not work for small brick.

Usage

<Brick msg={msg[]} msgDelay={msgDelay} />

// message accepts:
// 'title', 'body', 'delay', 'theme', 'bkg'
// where 'theme' and 'bkg' can be inherited
<Brick msg={[{
    title: 'Title',
    body: 'Message Body',
    delay: 6000
}, {
    title: 'Title 2',
    body: 'Message Body 2'
}]} msgDelay={7000} />

Info

Use BrickContainer to arrange bricks easily

Usage

// either specify JSON config of array of Bricks
<BrickContainer bricks={bricks} name={name} />

// or directly place Bricks as children
<BrickContainer bricks={bricks} name={name}>
    <Brick />
    <Brick />
    <Brick />
</BrickContainer>

Grid Layout

Set custom columns in each row

Usage

<BrickContainer size={size} columns={columns} />

// size: small - 4 cols, medium - 6 cols,
//       wide - 8 cols, large - 12 cols
<BrickContainer size='medium' />

// or you can set other number
<BrickContainer columns={6} />

Gap

Bricks always try to find a gap to fill. Thus, Bricks may position in different order

Use empty brick to fill the gap instead

Usage

// create empty bricks mannually
// can alter 'divProps' and apply custom CSS
<BrickContainer bricks={[
    { fill: true },
    { fill: true },
    {}
]} />

// or you can use Brick tag directly
<BrickContainer>
    <Brick fill />
    <Brick fill />
    <Brick />
</BrickContainer>

// use 'prepend'/'append' to fill in bulkly
// accepts 'count', 'size'
// 'prepend' - fill before that brick
// 'append' - fill after that brick
// 'prepend'/'append' don't work when using Brick tag directly
<BrickContainer bricks={[
    { prepend: { count: 2 } },
]} />