Skip to content

ReferenceUtils

useButton

Hook for creating accessible button components with keyboard and pointer interaction

Import

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

useButton provides button behavior including keyboard activation and accessibility checks. It returns a getButtonProps function for spreading onto a <button> element and a buttonRef for validation.

getButtonProps merges internal button props (click/keyboard handlers, disabled state) with any external props you pass in. Use renderElement to render the button with state-driven props and render prop support. In development mode, buttonRef warns if the rendered element is not a <button>.

Examples

Basic Usage

import { useButton } from '@videojs/react';
import type { Ref } from 'react';
import { useState } from 'react';

export default function BasicUsage() {
  const [count, setCount] = useState(0);
  const [disabled, setDisabled] = useState(false);

  const { getButtonProps, buttonRef } = useButton({
    displayName: 'ActivateButton',
    onActivate: () => setCount((c) => c + 1),
    isDisabled: () => disabled,
  });

  return (
    <div className="demo">
      <button ref={buttonRef as Ref<HTMLButtonElement>} {...getButtonProps()} className="button" disabled={disabled}>
        Activated {count} times
      </button>
      <label className="label">
        <input type="checkbox" checked={disabled} onChange={(e) => setDisabled(e.target.checked)} />
        Disabled
      </label>
    </div>
  );
}

API Reference

useButton(params): UseButtonReturnValue

Parameters

ParameterTypeDefaultDetails
params*object—

Return Value

PropertyTypeDetails
getButtonPropsfunction
buttonRefRef<HTMLElement>