Skip to content

Export out AsyncListOptions in react-stately to allow custom hook implementations to altar useAsyncList options via the parent #2373

@mattywong

Description

@mattywong

🙋 Feature Request

Export out AsyncListOptions in react-stately to allow custom hook implementations to altar useAsyncList options via the parent

🤔 Expected Behavior

It would be nice to be able to create a custom hook that implements a subset of the AsyncListOptions (e.g the load method), but allow the parent component to provide other options like initialFilterText, and initialSelectedKeys, i.e something like:

const useAutoComplete = (options?: Omit<AsyncListOptions<IModel>, "load">) => {
  const asyncList = useAsyncList<IModel>({
    ...options,
    load: async ({ filterText }) => {
      const data = await getData(filterText);
      return {
        items: data 
      }
    } 
  })

  return asyncList;
}

const Form = () => {
  const autoComplete = useAutoComplete({
    initialFilterText: "xyz",
    initialSelectedKeys: ["xyz"]
  })

  return ...
}

😯 Current Behavior

We have to hard code in the types:

const useAutoComplete = (options?: {
  initialFilterText?: string,
  initialSelectedKeys?: string[]
  ...
}) => {
  const asyncList = useAsyncList<IModel>({
    ...options,
    load: async ({ filterText }) => {
      const data = await getData(filterText);
      return {
        items: data 
      }
    } 
  })

  return asyncList;
}

💁 Possible Solution

export out the interface here:
https://github.com/adobe/react-spectrum/blob/main/packages/%40react-stately/data/src/useAsyncList.ts#L36

🔦 Context

Ability to create shared autocomplete hooks to endpoints without redefining the load function

💻 Examples

see above

🧢 Your Company/Team

n/a

🎁 Tracking Ticket (optional)

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions