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|Component to use for render, default div| |direction|Stringrow|row-reverse|column|column-reverse|Cross axis direction| |align|Stringflex-start|flex-end|center|baseline|stretch|Cross axis alignement| |justify|String|Justification| |wrap|Stringnowrap|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|Base item size| |shrink|Number|String|Item can shrink| |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|Component to use for render, default div| |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 />