robinmonjo

Redux higher order components

Sometimes we need to share props and behaviour between multiple components/containers. For that we can do a higher order component. Example:

Decorator component

Higher Order Component that will decorate other component:

kevinSuttle

import CreateInput from './Input.jsx';

const emailProps = {
  type: "email",
  inputMode: "email",
  name: "email",
  autoComplete: "email",
  pattern: "[a-zA-Z0-9_]+(?:\.[A-Za-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?!([a-zA-Z0-9]*\.[a-zA-Z0-9]*\.[a-zA-Z0-9]*\.))(?:[A-Za-z0-9](?:[a-zA-Z0-9-]*[A-Za-z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?",
  spellCheck: false,
  autoCorrect: "off",

jeromepl

import { Component } from "React";

export default (ComposedComponent) => class extends Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
  }
  componentDidMount() {
    this.setState({ data: 'Hello' });
  }