The Command is a fast, composable, command menu for React.
Use the OdsCommand component to render a command menu within a popover.
import { OdsCommand, OdsCommandInput, OdsCommandList, OdsCommandEmpty, OdsCommandGroup, OdsCommandItem, OdsCommandSeparator} from '@ods/components/react-alt';
const Example = () => { return ( <OdsCommand label="OdsCommand Menu"> <OdsCommandInput placeholder='Search commands..' /> <OdsCommandList> <OdsCommandEmpty>No results found.</OdsCommandEmpty>
<OdsCommandGroup heading="Procedures"> <OdsCommandItem><span>Add new procedure</span></OdsCommandItem> <OdsCommandItem><span>Edit procedure</span></OdsCommandItem> <OdsCommandItem disabled><span>Delete procedure</span></OdsCommandItem> </OdsCommandGroup>
<OdsCommandSeparator />
<OdsCommandGroup heading="Settings"> <OdsCommandItem><span>Manage your profile</span></OdsCommandItem> <OdsCommandItem><span>Manage system settings</span></OdsCommandItem> </OdsCommandGroup> </OdsCommandList> </OdsCommand> )}
export default Example;Use the OdsCommandDialog component to render the command menu within a dialog.
import * as React from "react"import { OdsCommandDialog, OdsCommandInput, OdsCommandList, OdsCommandGroup, OdsCommandSeparator, OdsCommandEmpty, OdsCommandItem} from '@ods/components/react-alt';
type CommandItem = { group?: string; label: string; disabled?: boolean;}
const commandItems: CommandItem[] = [ { label: "Add new procedure", group: "Procedures" }, { label: "Edit procedure", group: "Procedures" }, { label: "Delete procedure", group: "Procedures", disabled: true }, { label: "Manage your profile", group: "Settings" }, { label: "Manage system settings", group: "Settings" }]
const Example = () => { const [open, setOpen] = React.useState(false) React.useEffect(() => { const down = (e: KeyboardEvent) => { if (e.key === "j" && (e.metaKey || e.ctrlKey)) { e.preventDefault() setOpen((open) => !open) } } document.addEventListener("keydown", down) return () => document.removeEventListener("keydown", down) }, [])
return ( <> <p> Press{" "} <span>⌘</span>J </p> <OdsCommandDialog label="OdsCommand Menu" open={open}> <OdsCommandInput placeholder='Search procedures actions..' /> <OdsCommandList> <OdsCommandEmpty>No results found.</OdsCommandEmpty>
<OdsCommandGroup heading="Procedures"> {commandItems.filter(item => item.group === "Procedures").map((item, index) => ( <OdsCommandItem key={index} disabled={item.disabled} onSelect={() => { setOpen(false) }}> <span>{item.label}</span> </OdsCommandItem> ))} </OdsCommandGroup>
<OdsCommandSeparator />
<OdsCommandGroup heading="Settings"> {commandItems.filter(item => item.group === "Settings").map((item, index) => ( <OdsCommandItem key={index} disabled={item.disabled} onSelect={() => { setOpen(false) }}> <span>{item.label}</span> </OdsCommandItem> ))} </OdsCommandGroup>
</OdsCommandList> </OdsCommandDialog> </> )}
export default Example;import { OdsCommand } from '@ods/components/react-alt.command';This component is still in development and cannot be imported at this time.
The Command is built off of the cmdk library. Please reference its documentation for more information on the available props.
This section includes guidelines for designers and developers about the usage of this component in different contexts.