React-helpful NPM

React Helpful

Reference

asyncComponent

Dynamic import component support

const AuthPage = asyncComponent(() => import('./pages/auth'));
const DashboardPage = asyncComponent(() => import('./pages/dashboard'));

class App extends Component {
  render() {
    return (
      <Switch>
        <Route path="/auth" component={AuthPage} />
        <Route path="/" component={DashboardPage} />
      </Switch>
    );
  }
}

renderIf

Renders component if condition is truthy

@renderIf(({ items }) => items && items.length)
class Menu extends Component {
  render() {
    const { items } = this.props;
    return items.map(item => <Item item={item} />)
  }
}

withAwait

Awaits async operation completion

@withAwait(({ asyncAction }) => asyncAction)
class Menu extends Component {
  render() {
    const { data: { loading, result, error } } = this.props;
    if (loading) {
      return <Loading />;
    }
    if (error) {
      return <Error error={error} />;
    }
    return (
      <div>{result}</div>
    );
  }
}

withImport

Dynamic import support

@withImport(() => import('./Menu'))
class MenuLoader extends Component {
  render() {
    const { DynamicComponent, items } = this.props;
    if (DynamicComponent) {
      return <DynamicComponent items={items} />;
    }
    return <Loading />;
  }
}

withMQ

Matches Media Query conditions

@withMQ({
  isPortrait: '(orientation: portrait)',
  isHidden: {
    mediaQuery: '(max-width: 1024px)',
    matches: true,
  },
})
class SideMenu extends Component {
  render() {
    const { isPortrait, isHidden } = this.props;
    return <Menu horizontal={!isPortrait} hidden={isHidden} />;
  }
}

If

Conditional renderer If component

<If is={condition}>
  {() => <Component />}
</If>

IfElse

Conditional renderer IfElse component

<IfElse
 is={condition}
 then={() => <ComponentA />}
 else={() => <ComponentA />}
/>

For

Loop renderer For component

<For
  items={[1,2,3,4,5]}
  each={(value, key) => <div key={key}>{value}</value>}
/>

Switch

Conditional renderer Switch component

<Switch
  value={value}
  cases={{
    value1: () => <ComponentA />,
    value2: () => <ComponentB />,
    value3: () => <Component3 />,
  }}
  default={() => <ComponentD />}
/>

EventListener

Expects EventTarget as target callback result for listening event

<EventListener
  target={() => document}
  event="click"
  selector="#target"
  excludeParents={['.close', '.exit']}
  on={ event => {} }
  prevent={true}
  capture={true}
  once={true}
  passive={false}
/>

AsyncComposer

Execute async actions at the same time and await their completion

const id = 'operation_id';
const actions = [friendsLoadAsync, messagesLoadAsync];

<AsyncComposer id={id} actions={actions}>
{({ id, loading, result, error }) => {
  if (loading) {
    return <Loader />;
  }
  if (error) {
    return <Error error={error} />;
  }
  return <Component result={result} />;
}}
</AsyncComposer>

AsyncSequencer

Execute async actions one by one and await their completion

const id = 'operation_id';
const actions = [configLoadAsunc, configDependedDataLoadAsync];

<AsyncSequencer id={id} actions={actions}>
{({ id, loading, result, error }) => {
  if (loading) {
    return <Loader />;
  }
  if (error) {
    return <Error error={error} />;
  }
  return <Component result={result} />;
}}
</AsyncSequencer>