HookFormSort

Dropdown + direction button for managing a two-part sort value:

type Sort<T extends string | undefined> = [NonNullable<T> | 'auto', boolean];
Copy

The tuple is [field, ascending]. Use the Semantic UI React Dropdown to select a field and the Button to toggle ascending/descending.

Example

import { useForm } from 'react-hook-form';
import { Form } from 'semantic-ui-react';
import { HookFormSort } from '@karmaniverous/hook-form-semantic';

type FormData = { sort: ['auto' | 'name' | 'created', boolean] };

export function SortChooser() {
  const { control, handleSubmit, watch } = useForm<FormData>({
    defaultValues: { sort: ['auto', true] },
  });
  const [field, asc] = watch('sort');

  return (
    <Form onSubmit={handleSubmit(console.log)}>
      <HookFormSort<FormData>
        hookControl={control}
        hookName="sort"
        label="Sort by"
        dropdownOptions={[
          { text: 'Auto', value: 'auto' },
          { text: 'Name', value: 'name' },
          { text: 'Created', value: 'created' },
        ]}
      />
      <div style={{ marginTop: 8, fontSize: 12 }}>
        Current: {field} ({asc ? 'asc' : 'desc'})
      </div>
      <Form.Button primary style={{ marginTop: 12 }}>
        Apply
      </Form.Button>
    </Form>
  );
}
Copy

Notes

• Map the tuple to your API’s expected sort parameter and order (e.g., sort=name&order=asc).