Skip to content
This repository has been archived by the owner on Sep 12, 2020. It is now read-only.

A collection of small, reusable Higher Order Components (HOCs) for building React Native apps

Notifications You must be signed in to change notification settings

locphan87/react-native-hocs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Native HOCs

A collection of small, reusable Higher Order Components (HOCs) for building React Native apps

Table of Contents

Getting started

$ npm install react-native-hocs

APIs

renderWhen

Render related components conditionally

interface IRenderBranch {
  when(obj: any): boolean
  render: SFC<any> | 'NOTHING'
}
  • A common implementation to render a component
const MyComponent = props => {
  if (props.loading) {
    return <Loading />
  }
  if (props.errors) {
    return <Text>Something went wrong</Text>
  }
  if (equals(conditionA, true)) {
    return <ComponentA {...props} />
  }
  if (equals(conditionB, true)) {
    return <ComponentB {...props} />
  }
  ...

  return <View><MainComponent /></View>
}
  • Use renderWhen to keep only the main render and apply a pattern matching for sub-renders
import { renderWhen } from 'react-native-hocs'

const MyComponent = props => <View><MainComponent /></View>
const isLoading = props => {}
const hasErrror = props => {}
const isSomethingA = props => {}
const isSomethingB = props => {}
const enhance = renderWhen([
  {
    when: isLoading,
    render: Loading
  },
  {
    when: hasError,
    render: ErrorComponent
  },
  {
    when: isSomethingA,
    render: ComponentA
  },
  {
    when: isSomethingB,
    render: ComponentB
  }
])

export default enhance(MyComponent)

withLoadingCreator

Show a spinner conditionally as a replacement for the wrapped component (i.e while loading server data)

interface ILoadingOptions {
  predicate(obj: any): boolean
  component: SFC<any>
}
  • Create a higher order component withLoading
import { withLoadingCreator } from 'react-native-hocs'

import LoadingMask from '../../LoadingMask/LoadingMask.component'

const loadingPredicate = props => props.loading
const withLoading = withLoadingCreator({
  predicate: loadingPredicate,
  component: LoadingMask
})
  • Apply the HOC
const MyComponent = () => {...}

export default withLoading(MyComponent)

withUpdatingCreator

Show a spinner conditionally as an overlay over the wrapped component (i.e while updating server data)

interface IUpdateOptions {
  updates: string[]
  component: SFC<any>
  updatingStyle?: CSSProperties
}
  • Create a higher order component withUpdating
import { withUpdatingCreator } from 'react-native-hocs'

import LoadingMask from '../../LoadingMask/LoadingMask.component'

const withUpdating = withLoadingCreator({
  updates: ['updateUserPassword', 'logout'],
  component: LoadingMask
})

Whenever you call asynchronously a prop (i.e logout) that belongs to the update list updates, it'll show a spinner

  • Apply the HOC
const MyComponent = () => {...}

export default withUpdating(MyComponent)

withApp

interface IWithAppCreator {
  loadingComponent: SFC<any>
  loadingPredicate(obj: any): boolean
  updatingStyle?: CSSProperties
}
interface IWithApp {
  updates?: string[]
  renderWhen?: IRenderBranch[]
}
  • Create a higher order component withApp
import { withApp } from 'react-native-hocs'

import LoadingMask from '../../LoadingMask/LoadingMask.component'

const loadingPredicate = props => props.loading
const withApp = withAppCreator({
  loadingPredicate,
  loadingComponent: LoadingMask
})
  • Apply the HOC
const MyComponent = () => {...}

export default withApp({
  updates: ['logout'],
  renderWhen: [{
    when: hasError,
    render: ErrorComponent
  }]
})(MyComponent)

About

A collection of small, reusable Higher Order Components (HOCs) for building React Native apps

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published