pacocoursey / cmdk

Fast, unstyled command menu React component.
https://cmdk.paco.me
MIT License
9.42k stars 266 forks source link

Expose useStore/useCommand hooks #104

Closed emroot closed 1 year ago

emroot commented 1 year ago

hey I'm running into an issue where the search state value doesn't get cleared when I'm doing the following:

<Command.Input
  onKeyDown={e => {
    if (e.key === 'Enter' && e.currentTarget.value) {
      // Do some logic
     e.currentTarget.value = '';
    // state.search is still equal to the old value here
    }
  }}

It would be great to expose useStore so I can import and do

const store = useStore();
...
<Command.Input
  onKeyDown={e => {
    if (e.key === 'Enter' && e.currentTarget.value) {
      // Do some logic
     e.currentTarget.value = '';
    store.setState('search', '')
    }
  }}

PR for the change here: https://github.com/pacocoursey/cmdk/pull/105

pacocoursey commented 1 year ago

You should control the Command.Input component by passing value and onValueChange.

<Command.Input
  value={search}
  onValueChange={setSearch}
  onKeyDown={e => {
    if (e.key === 'Enter' && search) {
      setSearch('');
      // do whatever else you wanted
    }
  }
/>