FrameworkStyle

useButton

Hook for creating accessible button components with keyboard and pointer interaction

Import 

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

Usage

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. 

import { useButton, renderElement } from '@videojs/react';

function CustomButton({ onActivate, disabled }) {
  const { getButtonProps, buttonRef } = useButton({
    displayName: 'CustomButton',
    onActivate,
    isDisabled: () => disabled,
  });

  return (
    <button ref={buttonRef} {...getButtonProps()}>
      Click me
    </button>
  );
}

getButtonProps merges internal button props (click/keyboard handlers, disabled state) with any external props you pass in. In development mode, buttonRef warns if the rendered element is not a <button>.

Examples

Basic Usage 

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

import './BasicUsage.css';

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="react-use-button-basic">
      <button ref={buttonRef} {...getButtonProps()} className="react-use-button-basic__button" disabled={disabled}>
        Activated {count} times
      </button>
      <label className="react-use-button-basic__label">
        <input type="checkbox" checked={disabled} onChange={(e) => setDisabled(e.target.checked)} />
        Disabled
      </label>
    </div>
  );
}

API Reference

Parameters

Parameter Type Default
params* UseButtonParameters —

Return Value

Property Type
getButtonProps function
buttonRef Ref<HTMLElement>
VideoJS