QuickActions

Description:

The QuickActions component is a search input with enhanced accessibility features, allowing users to quickly access it using keyboard shortcuts (Cmd/Ctrl + K). It provides a convenient interface for performing quick searches with the ability to clear the input and additional accessibility information.

Usage:

import React, { useState } from 'react';
import QuickActions from 'blendx-ui/QuickActions';

const MyQuickActions = () => {
  const [searchValue, setSearchValue] = useState('');

  const handleSearchChange = (e) => {
    setSearchValue(e.target.value);
  };

  const handleClearSearch = () => {
    setSearchValue('');
  };

  return (
    <QuickActions
      placeholder="Search here..."
      value={searchValue}
      onChange={handleSearchChange}
      onClear={handleClearSearch}
    />
  );
};

export default MyQuickActions;

Props:

className (string): Custom class name for the component.
placeholder (string): Placeholder text displayed in the search input (default: 'Search').
infoText (string): Information text displayed for accessibility shortcuts (default: 'Press Cmd/Ctrl + K to focus on search').
onChange (func): Function called when the input value changes. This is required.
onClear (func): Function called when the input is cleared. This is required.
inputProps (object): Additional props to be passed to the input element.
value (string): The current value of the input. This is required.

Example

<QuickActions
  className="custom-class"
  placeholder="Type to search..."
  value={searchValue}
  onChange={(e) => setSearchValue(e.target.value)}
  onClear={() => setSearchValue('')}
/>

Accessibility

Users can focus on the search input by pressing Cmd/Ctrl + K.
The component includes a visual indicator for accessibility shortcuts.

QuickActions​

QuickActions