Function RenderInstances

Parameters

• props: {
      children?: (props: RenderInstancesRenderProps) => ReactNode;
      instances: InstanceRefListSchema;
      limit?: number;
      render?(options: RenderInstancesRenderOptions): ReactNode;
  }

  • Optionalchildren?: (props: RenderInstancesRenderProps) => ReactNode

    Can be used to customize rendering of the list entirely.

    Example

    Render instances including the total count of visible elements.

    function MyComponent(props) {
      return (
        <RenderInstances instances={props.children}>
          {(options) => (
            <Fragment>
              <div>{options.visibleInstances.length} Entries</div>
    
              <ul>
                {options.visibleInstances.map((item) => (
                  <li>{item.render()}</li>
                ))}
              </ul>
            </Fragment>
          )}
        </RenderInstances>
      );
    }
    Copy

  • instances: InstanceRefListSchema

    List of instances to render.

    Use Children to declare props that contain other instances.

  • Optionallimit?: number

    Limit the maximum number of visible instances that should be rendered.

  • render?: function

    • render?(options: RenderInstancesRenderOptions): ReactNode

      Can be used to customize rendering of each instance.

      render will be called for each visible instance.

      Parameters

      • options: RenderInstancesRenderOptions

      Returns ReactNode

      Example

      Render instances as a <ul>.

      function MyComponent(props) {
        return (
          <ul>
            <RenderInstances
              instances={props.children}
              render={(options) => <li key={options.key}>{options.render()}</li>}
            />
          </ul>
        );
      }
      Copy