Skip to content

useCustomLogic

You can build your own custom hook to perform unique logic that is not currently exported by the library.

The hooks exported by the library essentially just return HTML props (onClick, aria-describedby, etc.) inside a prop getter key, which get merged. You can do the same thing.

As the library is fully tree-shakeable, commonly used features will likely be included in the future to avoid you needing to write custom interaction hooks.

const useCustomLogic = (
  context: FloatingContext
): ElementProps => {
  // Note: all 3 of these properties are optional.
  return {
    reference: {
      // React.HTMLProps
      onClick() {
        console.log('clicked!');
      },
    },
    floating: {
      // React.HTMLProps
    },
    item: {
      // React.HTMLProps
    },
  };
};

If you have ideas for new hooks or functionality, don't hesitate to open a new issue or discussion on the GitHub repo!