@b-flower/bdm-react

BDM-React components

Basic components for use with React & @b-flower/bdm environment.

Components

Button

Same as @material-ui button with a big size option.

import '@b-flower/bdm-react/core/Button'

<Button size="big">

Flex

Flex system layout

Properties

property	values
component	`String	Component`
direction	String row|row-reverse|column|column-reverse	Cross axis direction
align	String flex-start|flex-end|center|baseline|stretch	Cross axis alignement
justify	String	Justification
wrap	String nowrap|wrap|wrap-reverse	Wether to wrap if contents overflow
flex	Number	Flex shortcut only : 0 -> n, relative size for a Flex.Item
basis	`Number	String`
shrink	`Number	String`
grow	Number	Item can grow
width	String	Any allowed CSS value
height	String	Any allowed CSS value
...		+ any prop supported by component

Usage

import Flex from '@b-flower/bdm-react/core/Flex'

 /* default container - direction : row */
 <Flex/>

 /* alias for Flex - direction : row */
 <Flex.Row/>

 /* container - direction : column */
 <Flex.Column/>

 /* default content - flex : 1 */
 <Flex.Item/>

Example

<Flex ...props>
  <Flex.Item flex={1}>
   // default size, takes available space (flex:1)
  </Flex.Item>
  </Flex.Item flex={0}>
    // resize to content size
  </Flex.Item>
 </Flex>

Header

Title & subtitle component

import Header from '@b-flower/bdm-react/core/Header'

<Header title="My Title"/>

Loader

Extended @material-ui's CircularProgress component

Properties

property	values
modal	Boolean	Full screen & centered loader
...		+ any prop supported by CircularProgress

Usage

import Loader from '@b-flower/bdm-react/core/Loader'

<Loader modal/>

Markdown

Markdown parser & renderer (uses react-markdown)

Properties

property	values
component	`String	Component`
source	String	Markdown text
options	Object	react-markdown options
...		+ any prop supported by component

Usage

import Markdown from '@b-flower/bdm-react/core/Markdown'

<Markdown />