How to use react-side-effect - 10 common examples

import React, { Component } from 'react'
import withSideEffect from 'react-side-effect'
import _ from 'lodash'

interface Props {
  className: string
  styleName?: string
}

@withSideEffect(
  reducePropsToState,
  handleStateChangeOnClient
)
class BodyClass extends Component { // eslint-disable-line

  static rewind: () => string

  render() {
    return (
      <div>{this.props.children}</div>
    )
  }
}

function reducePropsToState(propsList) {
  const innermostProps = _.last(propsList)

const element = document.documentElement;
  if (!element || !element.dataset) return;
  if (element.dataset.addedClasses) {
    const previouslyAddedClasses = element.dataset.addedClasses.split(",");
    previouslyAddedClasses.forEach(className => {
      element.classList.remove(className);
    });
  }
  htmlClasses.forEach(className => {
    element.classList.add(className.trim());
  });
  lastHtmlElementClassValue = htmlClasses.join(",");
  document.documentElement.dataset.addedClasses = htmlClasses;
}

export default withSideEffect(
  reducePropsToState,
  handleStateChangeOnClient
)(HtmlClass);

const CurrentState = React.createClass({
  displayName: 'CurrentState',
  propTypes: {
    state: React.PropTypes.object.isRequired
  },

  render: function() {
    if (this.props.children) {
      return React.Children.only(this.props.children);
    } else {
      return null;
    }
  }
});

export default withSideEffect(
  reducePropsToState,
  handleStateChangeOnClient
)(CurrentState);

return null;
};

/**
 * Set the title of the page based on the children of PageTitle.
 *
 * @param  {(String|Array)} title
 *   Title may be an array if the number children is > 1
 */
const handleStateChangeOnClient = title => {
  document.title = (Array.isArray(title) ? title : [title])
    .map(e => (e && e instanceof String ? e.trim() : ''))
    .join(' ');
};

export default withSideEffect(reducePropsToState, handleStateChangeOnClient)(
  PageTitle,
);

function reducePropsToState(propsList) {
    let className;
    propsList.forEach(function (props) {
        className = props.className;
    });
    return className;
}
function handleStateChangeOnClient(className) {
    if (typeof className !== 'undefined') {
        document.body.className = className;
    }
    else {
        document.body.removeAttribute('class');
    }
}
export default withSideEffect(reducePropsToState, handleStateChangeOnClient)(Body);

return React.Children.only(this.props.children);
		}
		return null;
	}
}

function reducePropsToState(propsList) {
	if (!propsList.length) {
		return;
	}
	return 403;
}

function handleStateChangeOnClient(code) {}

export default withSideEffect(reducePropsToState, handleStateChangeOnClient)(
	Forbidden
);

return null;
  }
}

function reducePropsToState(propsList) {
  const classes = propsList.map(prop => {
    return prop.className;
  });
  return classes;
}

function handleStateChangeOnClient(bodyClasses) {
  document.body.className = bodyClasses.join(" ").trim();
}

export default withSideEffect(reducePropsToState, handleStateChangeOnClient)(
  BodyClass
);

),
    auto: PropTypes.objectOf(PropTypes.bool)
  };

  render() {
    const { children } = this.props;
    const count = React.Children.count(children);
    return count === 1 ? (
      React.Children.only(children)
    ) : count ? (
      <div>{this.props.children}</div>
    ) : null;
  }
}

const DocumentMetaWithSideEffect = withSideEffect(
  reducePropsTostate,
  handleStateChangeOnClient
)(DocumentMeta);

DocumentMetaWithSideEffect.renderAsReact = function rewindAsReact() {
  return render(DocumentMetaWithSideEffect.rewind());
};

export default DocumentMetaWithSideEffect;

const innermostProps = propsList[propsList.length - 1]
  if (innermostProps) {
    const { defaultTitle, title } = innermostProps
    if (typeof title !== 'undefined') {
      return defaultTitle
        ? `${title} | ${defaultTitle}`
        : `${title} | Untitled Document`
    }
  }
}

function handleStateChangeOnClient (title) {
  document.title = title || ''
}

export default withSideEffect(
  reducePropsToState,
  handleStateChangeOnClient
)(DocumentTitle)

/**
 * handleStateChangeOnClient
 * @function handleStateChangeOnClient
 * @param {*} classList classList
 * @returns {null} null
 */
function handleStateChangeOnClient(classList) {
  document.body.className = '';
  classList.map(className => {
    if (!document.body.classList.contains(className)) {
      document.body.classList.add(className);
    }
  });
}

export default withSideEffect(reducePropsToState, handleStateChangeOnClient)(
  BodyClass,
);