@blueeast/bluerain-plugin-responsive-components NP

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	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	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	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	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.