How to use the react-component-tree.Mixin function in react-component-tree

To help you get started, we’ve selected a few react-component-tree examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github react-cosmos / react-cosmos / packages / react-component-playground / src / components / component-playground.jsx View on Github external
* in isolation. It can either render the component full-screen or with the
   * navigation pane on the side.
   */
  displayName: 'ComponentPlayground',

  propTypes: {
    component: PropTypes.string,
    editor: PropTypes.bool,
    fixture: PropTypes.string,
    fixtures: PropTypes.object.isRequired,
    fullScreen: PropTypes.bool,
    loaderUri: PropTypes.string.isRequired,
    router: PropTypes.object.isRequired,
  },

  mixins: [ComponentTree.Mixin],

  statics: {
    isFixtureSelected(props) {
      return Boolean(props.component && props.fixture);
    },

    didFixtureNavChange(prevProps, nextProps) {
      return prevProps.component !== nextProps.component ||
             prevProps.fixture !== nextProps.fixture;
    },

    getSelectedFixtureContents(props) {
      const { fixtures, component, fixture } = props;

      // This returns the fixture contents as it is initially defined, excluding any modifications.
      return component && fixture && fixtures[component] && fixtures[component][fixture];
github skidding / react-component-playground / src / components / component-playground.jsx View on Github external
React = require('react'),
    classNames = require('classnames'),
    ComponentTree = require('react-component-tree'),
    stringifyParams = require('react-querystring-router').uri.stringifyParams,
    parseLocation = require('react-querystring-router').uri.parseLocation,
    isSerializable = require('../lib/is-serializable.js').isSerializable;

module.exports = React.createClass({
  /**
   * ComponentPlayground provides a minimal frame for loading React components
   * in isolation. It can either render the component full-screen or with the
   * navigation pane on the side.
   */
  displayName: 'ComponentPlayground',

  mixins: [ComponentTree.Mixin],

  propTypes: {
    components: React.PropTypes.object.isRequired,
    component: React.PropTypes.string,
    fixture: React.PropTypes.string,
    editor: React.PropTypes.bool,
    fullScreen: React.PropTypes.bool,
    containerClassName: React.PropTypes.string
  },

  statics: {
    isFixtureSelected: function(props) {
      return !!(props.component && props.fixture);
    },

    didFixtureChange: function(prevProps, nextProps) {

react-component-tree

Serialize and reproduce the state of an entire tree of React components

MIT
Latest version published 7 years ago

Package Health Score

70 / 100
Full package analysis

Similar packages