react-x-render

Render React components conditionally using if and unless.

Getting Started

Install react-x-render using yarn:

yarn add react-x-render

Usage

import React from 'react';
import PropTypes from 'prop-types';
import {Text, View} from 'react-native';
import Render from 'react-x-render';
 
 
class HomePage extends React.Component {
 
  // --------------------------------------------------
  // Props
  // --------------------------------------------------
  static propTypes = {
    user: PropTypes.object.isRequired,
  };
 
  static defaultProps = {
  };
 
  // --------------------------------------------------
  // Render
  // --------------------------------------------------
  render() {
    const {user} = this.props;
 
    return (
      <View>
        <Render if={user.getIsActivated()}>
          <Text>{`Hi ${user.getName()}`}</Text>
        </Render>
        <View>
          ...
        </View>
        <Render unless={user.getIsDisabled()}>
          <Text>{`Receive $1,000,000 for free?`}</Text>
        </Render>
      </View>
    );
  }
 
}

Props

Prop	Type	Required	Description
if	boolean	no	If this is true, it will render the child.
unless	boolean	no	If this is false, it will render the child.

Contributing

If you have any ideas on how this module could be better, create an Issue or submit a PR.