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

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

Container

Props

ResponsiveLayout

Props

Row

Props

WindowInfo

Props

withWindowSize

Props

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:

Returns:

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:

Returns:

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:

Returns:

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:

Returns:

API

ResponsiveComponentsPlugin

Properties

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