Toggle UI Elements

Handling minor UX variations in the component by toggling ON/OFF features.

Modify the component to take in a prop to control it’s behavior.

Gotcha:

Easy to overuse this idea by adding props for every variation.

• Only add in props for features specific to the current feature that the component.
• Basically, not violate the Single Responsibility Principle.

Example

Show/Hide password feature in Login form

class PasswordField extends Component {
  render() {
    const {
      password,
      showHidePassword,
      showErrorOnTop,
      showLabels,
      shouldComplyAda
    } = this.props;
    return (
      <div>
        <Password
          field={password}
          label="Password"
          showErrorOnTop={showErrorOnTop}
          placeholder={shouldComplyAda ? "" : "Password"}
          showLabel={showLabels}
          showHidePassword={showHidePassword}
        />
      </div>
    );
  }
}

Related links:

• Slides from my talk: Building Multi-tenant UI with React