@reduxed/responsive v0.1.4

@reduxed/responsive

Provides responsive components

More features to come

Part of @reduxed utilities for Redux.

Table of Contents

• Installation
• Usage

Installation

$ yarn add @reduxed/responsive

or

$ npm install --save @reduxed/responsive

The npm package provides a CommonJS build, a UMD build, as well as an AMD build.

Usage

1. Trigger the appropriate action when the screen dimensions change

import { View } from 'react-native'
import { changeDimensions } from '@reduxed/responsive'

const renderResponsiveComponent = screen =>
  screen.is.small ? <div></div> : <span></span>

const Component = () =>
  <View onLayout={ ({ nativeEvent: { layout } }) => changeDimensions(layout) }>
  </View>

2. Build a more responsive UI by using render props:

import { ScreenDimensions } from '@reduxed/responsive'

const renderResponsiveComponent = screen =>
  screen.is.small ? <div></div> : <span></span>

const Component = () =>
  <ScreenDimensions render={ renderResponsiveComponent }/>

Optional - Set custom width values:

Build a more responsive UI by using render props:

import { setWidthDimensions } from '@reduxed/responsive'

setWidthDimensions({ small: 576, medium: 768, large: 992, extraLarge: 1200 }) // these are default values