Skip to content

ReferenceUtils

renderElement

Utility for rendering UI component elements with state-driven props and render prop support

Import

import { renderElement } from "@videojs/react";

renderElement renders a UI component element, handling default tag rendering, render props (element or function), props merging, ref composition, and state-driven className/style.

import { useRef } from "react";
import { renderElement } from "@videojs/react";

function PlayButton({ className, style, render, ...props }) {
  const buttonRef = useRef<HTMLButtonElement>(null);
  const state = { paused: true };

  return renderElement(
    "button",
    { className, style, render },
    {
      state,
      ref: buttonRef,
      props: [{ type: "button", "aria-label": "Play" }, props],
    },
  );
}

The className and style component props accept either static values or functions that receive the current state:

<PlayButton
  className={(state) => (state.paused ? "paused" : "playing")}
  style={(state) => ({ opacity: state.paused ? 0.5 : 1 })}
/>

The render prop lets consumers fully customize the rendered element while preserving all internal props and refs:

<PlayButton
  render={(props, state) => (
    <button {...props}>{state.paused ? "Play" : "Pause"}</button>
  )}
/>

Examples

Basic Usage

Default <span>Element <strong>Inactive
import { renderElement } from '@videojs/react';
import { type ReactNode, useState } from 'react';

interface TagState {
  active: boolean;
}

function Tag({
  className,
  style,
  render,
  active,
  children,
}: renderElement.ComponentProps<TagState> & { active: boolean; children?: ReactNode }) {
  const state: TagState = { active };

  return renderElement(
    'span',
    { className, style, render },
    {
      state,
      props: { children },
      stateAttrMap: { active: 'data-active' },
    }
  );
}

export default function BasicUsage() {
  const [active, setActive] = useState(false);

  const className = (state: TagState) => `tag${state.active ? ' tag--active' : ''}`;

  const style = (state: TagState) => ({
    fontSize: state.active ? '1.125rem' : '0.875rem',
  });

  return (
    <div className="demo">
      <button type="button" className="toggle" onClick={() => setActive((prev) => !prev)}>
        {active ? 'Deactivate' : 'Activate'}
      </button>

      <div className="tags">
        <Tag active={active} className={className} style={style}>
          Default &lt;span&gt;
        </Tag>

        <Tag active={active} className={className} style={style} render={<strong />}>
          Element &lt;strong&gt;
        </Tag>

        <Tag
          active={active}
          className={className}
          style={style}
          render={(props, state) => <em {...props}>{state.active ? 'Active!' : 'Inactive'}</em>}
        />
      </div>
    </div>
  );
}

API Reference

renderElement<State extends object, RenderedElementType extends Element, TagName extends keyof React.JSX.IntrinsicElements>(element, componentProps, params): ReactElement | null

Parameters

ParameterTypeDefaultDetails
element*TagName—
componentProps*object—
params*object—

Return Value

ReactElement | null