If you think its ok, you can add hook like this in examples.

[kamilduleba]

Hello, using trap like this seems clean. So if you think its good idea you can add it to examples or sth.

Hook:

import React, { useState, useRef, useEffect } from 'react';
import FocusTrap from 'focus-trap-react';

const useFocusTrap = () => {
  const [containerElements, setContainerElements] = useState([]);

  const containerRef = useRef(null);
  const focusTrapElement = useRef(null);

  useEffect(() => {
    const element = containerRef.current;
    if (element) {
      if (!containerElements.includes(element)) {
        setContainerElements([element]);
      }
    } else if (element) {
      if (containerElements.length > 1 || !containerElements.includes(element)) {
        setContainerElements([element]);
      }
    } else {
      setContainerElements([]);
    }

    focusTrapElement.current = (
      <FocusTrap
        containerElements={containerElements}
        focusTrapOptions={{
          allowOutsideClick(event) {
            return event.target.id === 'trap1';
          },
        }}
      >
        <div />
      </FocusTrap>
    );
  });

  return { focusTrapElement, containerRef };
};

export default useFocusTrap;

In component:

const { focusTrapElement, containerRef } = useFocusTrap();

return <SomeElement ref={containerRef}>
 {focusTrapElement.current}
{children}
</SomeElement>

cheers, great lib :)

[kamilduleba]

or

Hook:

import { useRef, useEffect } from 'react';
import { createFocusTrap } from 'focus-trap';

const useFocusTrap = () => {
  const containerRef = useRef(null);
  const prevContainer = useRef(null);
  const focusTrap = useRef(null);

  useEffect(() => {
    if (!focusTrap.current) {
      prevContainer.current = containerRef.current;
      focusTrap.current = createFocusTrap([containerRef.current], {
        allowOutsideClick() {
          return true;
        },
      });
      focusTrap.current.activate();
    } else if (prevContainer.current !== containerRef.current) {
      prevContainer.current = containerRef.current;
      focusTrap.current.updateContainerElements([containerRef.current]);
    }
  });

  useEffect(() => {
    return () => {
      if (focusTrap.current) {
        focusTrap.current.deactivate();
        focusTrap.current = null;
      }
    };
  }, []);

  return { containerRef };
};

export default useFocusTrap;

Component:

const { containerRef } = useFocusTrap();

return <SomeElement ref={containerRef}>{children}</SomeElement>

[stefcameron]

@kamilduleba Thanks for the nice hook suggestions! 😄

In your first example, I'm a little confused by this:

    ...
    if (element) {
      if (!containerElements.includes(element)) {
        setContainerElements([element]);
      }
    } else if (element) {
    ...

It seems like there's a typo there because if element is truthy, the second case would never be executed.

I like your second suggestion better, though it only seems to work with a single container element. But I suppose it's elegant that way. I would be nice to enhance useFocusTrap(options) to accept the trap options and pass that down into createFocusTrap(options)...

I feel like the second example is on the right track. If we could refine/enhance it by passing-in the trap options and figure out a way to provide multi-container support, we could add this to the library as the functional component "way"! We might also want to check that containerRef.current is set before creating the trap, something like:

  useEffect(() => {
    if (!focusTrap.current) {
      prevContainer.current = containerRef.current;
      if (containerRef.current) {
        focusTrap.current = ...
        ...

[kamilduleba]

We can provide options by passing object to useFocuseTrap function.
Multi-container support can be provided by passing array of ids, but it's seems to not be a very "react way". And if element with passed id don't exist there will be error, so maybe this function should also check for it.
Second possibility can be just using multiple refs.

Example in code:

import { useRef, useEffect } from 'react';
import { createFocusTrap } from 'focus-trap';

const useFocusTrap = (options, selectors = []) => { // default value = [] to not break due to spread operator
  const container1Ref = useRef(null);
  const container2Ref = useRef(null);
  const prevContainer = useRef(null);
  const focusTrap = useRef(null);

  useEffect(() => {
    if (!focusTrap.current) {
      prevContainer.current = container1Ref.current;
      focusTrap.current = createFocusTrap(
        [container1Ref.current, container2Ref.current, ...selectors],
        options,
      );
      focusTrap.current.activate();
    } else if (prevContainer.current !== container1Ref.current) {
      prevContainer.current = container1Ref.current;
      focusTrap.current.updateContainerElements([
        container1Ref.current,
        container2Ref,
        ...selectors,
      ]);
    }
  });

  useEffect(() => {
    return () => {
      if (focusTrap.current) {
        focusTrap.current.deactivate();
        focusTrap.current = null;
      }
    };
  }, []);

  return { container1Ref, container2Ref };
};

export default useFocusTrap;

  const { container1Ref, container2Ref } = useFocusTrap(
    {
      allowOutsideClick() {
        return true;
      },
    },
    ['#container1', '#container2'],
  );

return (
      <>
        <div ref={container1Ref}>
          <button type="button">Click ref 1</button>
        </div>
        <div ref={container2Ref}>
          <button type="button">Click ref 2</button>
        </div>
        <div>
          <button type="button">Im not working</button>
        </div>
        <div id="container1">
          <button type="button">Click id 1</button>
        </div>
        <div id="container2">
          <button type="button">Click id 2</button>
        </div>
      </>
)

[stefcameron]

Thanks for giving it a shot with options and multiple containers. Multiple containers is a challenge. In this solution, there's a limit to the number of containers. I'm not sure how we could make it support an arbitrary number of containers. I'm not sure React supports declaring refs in a loop (i.e. one for each selector you provide). 🤔 Unless we used a single ref with multiple "refs" inside of it:

//
// useFocusTrap.js
//

import { useRef, useEffect } from 'react';
import { createFocusTrap } from 'focus-trap';
import { difference } from 'lodash'; // NOTE: it should be easy enough to implement a cheap version of this here to avoid the import

// convert Array<string> to { [string]: { current: null } } map
const mapSelectors = (selectors) => selectors.reduce((ref, sel) => {
  ref[sel] = { current: null };
  return ref;
}, {});

const useFocusTrap = (options, selectors = []) => {
  const trapSelectors = useRef(selectors.concat());
  const prevContainer = useRef(null);
  const focusTrap = useRef(null);

  useEffect(() => {
    if (!focusTrap.current) {
      focusTrap.current = createFocusTrap(
        trapSelectors.current,
        options,
      );
      focusTrap.current.activate();
    } else if (trapSelectors.current.length != selectors.length || difference(trapSelectors.current, selectors).length > 0) {
      trapSelectors.current = selectors.concat();
      focusTrap.current.updateContainerElements(trapSelectors.current);
    }
  });

  useEffect(() => {
    return () => {
      if (focusTrap.current) {
        focusTrap.current.deactivate();
        focusTrap.current = null;
      }
    };
  }, []);

  return focusTrap.current;
};

export default useFocusTrap;

//
// Component.js
//

import useFocusTrap from './useFocusTrap';

export default function Component() {
  useFocusTrap(
    {
      allowOutsideClick() {
        return true;
      },
    },
    ['#container1', '#container2'],
  );

return (
      <>
        <div id="container1">
          <button type="button">Click id 1</button>
        </div>
        <div>
          <button type="button">Im not working</button>
        </div>
        <div id="container2">
          <button type="button">Click id 2</button>
        </div>
      </>
)

WDYT? It does only use selectors, though, but that seems easier to manage in this case. I haven't tested this as live code, though, so it may not work. Not 100% sure.