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"