@instructure/ui-react-utils/types/ComponentIdentifier.d.ts

A React utility library made by Instructure Inc.

import React, { Component, ComponentType, ReactNode } from 'react';
import PropTypes from 'prop-types';
/**
---
category: utilities/react
---
Abstract component identifier. Helpful for picking out a specific child.

  ```js
  class App extends Component {
    render () {
      const title = pick(Title, this.props.children)
      const content = pick(Content, this.props.children)

      return (
        <div>
          {title}
          <ContextView>
            {content}
          </ContextView>
         </div>
     )
    }
  }

  class Title extends ComponentIdentifier { static displayName = 'Title' }
  class Content extends ComponentIdentifier { static displayName = 'Content' }

  ReactDOM.render(
    <App>
      <Title><h2>Hello World!</h2></Title>
      <Content><div>This text gets decorated within `App`.</div></Content>
    </App>,
    document.getElementById('container')
  )
  ```
  @module ComponentIdentifier
**/
declare class ComponentIdentifier<P extends {
    children: ReactNode;
}> extends Component<P> {
    static propTypes: {
        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
    };
    static defaultProps: {
        children: null;
    };
    static pick: (component: ComponentType, children: ReactNode) => undefined;
    render(): React.JSX.Element | null;
}
export default ComponentIdentifier;
export { 
/**
 *
 * Pick a specific child component from a component's children
 *
 * @param {Component} component The component to look for
 * @param {Array} children The child components to look through
 * @return {Component} The matching component if found, otherwise undefined
 */
ComponentIdentifier };
//# sourceMappingURL=ComponentIdentifier.d.ts.map