Bluerain Responsive Components Plugin

This plugin adds responsive components in BlueRainContext. Wrapping page or view in ResponsiveLayout makes it responsive.https://blueeast.gitbook.io/bluerain-plugin-responsive-components

| 🌏 Web | 🖥 Electron | 📱 React Native | | :----------------: | :----------------: | :----------------: | | ✔️ | ✔️ | TBD |

Installation

Run the following command in the plugin directoy:

yarn add  @blueeast/bluerain-plugin-responsive-components

Example

import BR from '@blueeast/bluerain-os';

<BR.Components.ResponsiveLayout default={DesktopComponent}  {...props} />  
  <BR.Components.Container  {...props}>
    <BR.Components.Row  {...props}>
       <BR.Components.Column sm={12} md={6} xs={9} lg={2} xl={2}  {...props}>
      </BR.Components.Column>
    </BR.Components.Row>
  </BR.Components.Container>
</BR.Components.ResponsiveLayout>

Components

This plugin registers following components in BlueRain context:

Column

Props

| Name | Default | Type | Description | | ---------- | ------- | ---------------------------------------- | ------------------------------------------------------ | | xs | | number | The width of the column on extra small screen | | xsOffset | | number | The number of columns to offset on extra small screen | | xsHidden | | boolean | Hide this column on extra small screen | | sm | | number |The width of the column on small screen.| | smOffset | | number | The number of columns to offset on small screen. | | smHidden | | boolean | Hide this column on small screen. | | md | | number | The width of the column on medium screen. | | mdOffset | | number | The number of columns to offset on medium screen. | | mdHidden | | boolean | Hide this column on medium screen. | | lg | | number | The width of the column on large screen. | | mdHidden | | boolean | Hide this column on medium screen. | | lgOffset | | number | The number of columns to offset on large screen. | | lgHidden | | boolean | Hide this column on large screen. | | xl | | number | The width of the column on extra large screen. | | xlOffset | | number | The number of columns to offset on extra large screen. | | xlHidden | | boolean | The number of columns to offset on extra large screen. | | children | | Node | It can wrap another component in itself. | | bluerain | | object | This is used to give bluerain context | | windowSize | | number | It is used to give window size. | | size | | object | Number of columns parent row has. | | gutter | | number | Spacing between 2 columns. |

Container

Props

| Name | Default | Type | Description | | ---------- | ------- | ------ | ------------------------------------- | | bluerain | | object | This is used to give bluerain context | | widths | | number | It Provides width of Container | | windowSize | | number | It is used to give window size | | style | | object | It is used for styling container |

ResponsiveLayout

Props

| Name | Default | Type | Description | | -------- | ------- | ------------------- | ------------------------------------------------------------------------- | | bluerain | | object | This is used to give bluerain context | | widths | | number | It Provides width of Container | | xs | | React.ComponentType | The component to render when the screen size is extra-small | | sm | | React.ComponentType | The component to render when the screen size is small | | lg | | React.ComponentType | The component to render when the screen size is large | | xl | | React.ComponentType | The component to render when the screen size is extra-large | | default | | React.ComponentType | The default component to render, if a current size component is not given |

Row

Props

| Name | Default | Type | Description | | -------------- | ------- | ------- | -------------------------------------------------------------------------------- | | bluerain | | object | This is used to give bluerain context | | windowSize | | number | It is used to give window size | | style | | object | It is used for styling row | | size | | number | Total number of columns this Row can have. Defaults to 12. | | gutter | | number | The gutter width, i.e. padding between columns. Defaults to 30 (15 on each side) | | nowrap | | boolean | Accepts a boolean. This boolean defines the style property flexWrap. | | alignItems | | string | Defines the javascript style property alignItems of the component | | justifyContent | | string | Defines the javascript style property justifyContent of the componen |

WindowInfo

Props

| Name | Default | Type | Description | | ------------------- | ------- | ------ | ----------------------------------------------------- | | setWindowDimentions | | object | This is used to give height and width of the window |

withWindowSize

Props

| Name | Default | Type | Description | | ---------- | ------- | ------ | ----------------------------------------------------- | | windowSize | | object | This is used to give height and width of the window |

Hooks

This plugin adds its functions in following hooks:

bluerain.redux.reducers.bluerain

Window reducers are added through this hook to modify the nested bluerain reducer.

Parameters:

| Name | Type | Description | | --------- | --------------- | ------------------------------ | | reducers | object | Th is contains window size(height and width)|

Returns:

| Name | Type | Description | | --------- | --------------- | ------------------------------ | | WindowReducer | object | This adds window reducer in reducers |

bluerain.redux.initialState

This hook gives the ability to modify the initial state sent to the redux store. Responsive component plugin uses this hook to set initial state of window to bluerain object.

Parameters:

| Name | Type | Description | | --------- | --------------- | ------------------------------ | | initialstate | object |It provides initial state of window|

Returns:

| Name | Type | Description | | --------- | --------------- | ------------------------------ | |window | object |It updates the state of window in reducer to initialstate|

bluerain.redux.middlewares

This plugin adds custom middlewares to the main redux store. The custom middleware takes store as argument, then compares window previous and current sizes. If size is changed, it emits an event with 'plugin.window_info.resize' string.

Parameters:

| Name | Type | Description | | --------- | --------------- | ------------------------------ | | middlewares | object |middlewaresare added in redux store|

Returns:

| Name | Type | Description | | --------- | --------------- | ------------------------------ | |window | object |It updates the state of window in reducer to initialstate of window|

bluerain.system.plugins.initialized

Once the plugins are initialized in the system, Responsive Plugin uses this hook to adjust component layout by comparing the new and old screen dimensions, hence re-renders the component.

Parameters:

| Name | Type | Description | | --------- | --------------- | ------------------------------ | | Component | React.Component |middlewaresare added in redux store|

Returns:

| Name | Type | Description | | --------- | --------------- | ------------------------------ | |Component | React.Component | It is used to render new component with new window size|

API

ResponsiveComponentsPlugin

Properties

• pluginName string "ResponsiveComponentsPlugin"
• slug string "responsive-components"