/react-component-decorators

helpful react decorators

Primary LanguageJavaScript

react-component-decorators

  • helpful react decorators

example

const loader = <h1>loading eh</h1>
const validateConditions = {
  props: {
    magic: true,
  }
  state: {
    canadians: length => Number.isInteger(length),
  },
}
const validateOpts = {
  // default satisfied false
  satisfied: false,

  // validate not just when ready,
  // but validate every time we render
  //
  // true makes it only render when validated once
  ready: false,

  // displayed until valid
  displayLoading: loader,
}
@renderWhen(validateConditions, validateOpts)
@injectPropsClass(['props', 'state'])
class Eh extends React.Component {
  static propTypes = {
    magic: React.PropTypes.string,
  }
  state = {
    canadians: undefined,
  }

  componentWillReceiveProps = ({magic}) => magic ? this.setState({magic}) : 0
  render({magic}, {canadians}) {
    console.debug({magic, canadians})
  }
}

const loadingEh = <Eh magic={false} />
const validEh = <Eh magic={true} />

importing

import {
  injectProps,
  injectPropsClass,
  renderWhen,
  shouldUpdateFor,
  validateOn,
  validateSetState,

  // also exports autobind & shallowEqual
  // as they are deps anyway
  autobind,
  shallowEqual,
} from 'react-component-decorators'

package size

import injectProps from 'react-component-decorators/lib/injectProps'
import injectPropsClass from 'react-component-decorators/lib/injectPropsClass'
import renderWhen from 'react-component-decorators/lib/renderWhen'
import validateOn from 'react-component-decorators/lib/validateOn'
import validateSetState from 'react-component-decorators/lib/validateSetState'

// also export {shouldUpdateFor, shallowEqual, autobind}
import shouldUpdateFor from 'react-component-decorators/lib/shouldUpdateFor'

// you can also import from
// 'react-component-decorators/src/*'
// if you want to load it yourself

resources