How to use the @instructure/ui-decorator function in @instructure/ui-decorator

To help you get started, we’ve selected a few @instructure/ui-decorator 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 instructure / instructure-ui / packages / ui-utils / src / react / containerQuery.js View on Github external
* A decorator or higher order component to provide the ability to style a
 * React component with container queries.
 *
 * The containerQuery HOC provides a `size` getter so that you can alter the behavior
 * of the component based on the size of its container.
 *
 * The `size` will be updated whenever the dimensions of the container change,
 * and will be passed as a parameter to the onSizeChange prop provided.
 *
 * So that CSS rules can be applied based on the dimensions of the container,
 * custom data attributes are added to the container DOM element.
 *
 * @param {Object} query
 * @returns {Function} a function that creates an element with containerQuery behavior
 */
export default decorator((ComposedComponent, query) => {
  const getSelectorMap = function (el) {
    return query && parseQuery(query, el)
  }

  return class extends ComposedComponent {
    static getSelectorMap = getSelectorMap

    static propTypes = {
      ...ComposedComponent.propTypes,
      onSizeChange: PropTypes.func
    }

    updateAttributes = (size) => {
      if (this._size && (this._size.width === size.width && this._size.height === size.height)) {
        return
      }

@instructure/ui-decorator

A utility to wrap (decorates) a React component class adding functionality.

MIT
Latest version published 2 days ago

Package Health Score

87 / 100
Full package analysis

Popular @instructure/ui-decorator functions

Similar packages