This package has been deprecated

Author message:

This package has been abandoned

@nextcloud/focus-trap
TypeScript icon, indicating that this package has built-in type declarations

0.1.0-beta • Public • Published

@nextcloud/focus-trap

Wrapper over focus-trap library to have more than one instance activate at the same time.

Install

npm install @nextcloud/focus-trap -S
yarn add @nextcloud/focus-trap

The API is the same of focus-trap, just follow the doc.

import { createFocusTrap } from '@nextcloud/focus-trap';

Example

Vue.js v3

Check src/ to full example.

import type { ComputedRef, Ref } from 'vue';
import type { FocusTrap } from '@nextcloud/focus-trap';

import { watchEffect, onBeforeUnmount } from 'vue';
import { createFocusTrap } from '@nextcloud/focus-trap';

type Input = ComputedRef<boolean> | Ref<boolean>;

const useFocusTrap = (state: Input, el: Ref<HTMLElement | null>): void => {
  let focusTrap: FocusTrap | null = null;

  const onOpen = (): void => {
    if (el.value == null) {
      return;
    }

    focusTrap = createFocusTrap(el.value, {
      escapeDeactivates: false,
      allowOutsideClick: true,
    });

    focusTrap.activate();
  };

  const onClose = (): void => {
    if (focusTrap == null) {
      return;
    }

    focusTrap.deactivate();
    focusTrap = null;
  };

  watchEffect(() => {
    state.value
      ? requestAnimationFrame(onOpen)
      : requestAnimationFrame(onClose);
  });

  onBeforeUnmount(onClose);
};

export { useFocusTrap };

Development

This project is build on top of

Install dependencies

npm install

Run tests

# test single run
npm run test

# test with coverage
npm run test -- --coverage

# watch tests and code changes
npm run test:watch

Run demo app

npm run dev

Linter & Format

# apply prettier
npm run format

# run eslint
npm run lint

# apply fix to eslint errors
npm run lint:fix

# check lint and format
npm run check

Package Sidebar

Install

npm i @nextcloud/focus-trap

Weekly Downloads

3

Version

0.1.0-beta

License

AGPL-3.0

Unpacked Size

42.2 kB

Total Files

8

Last publish

Collaborators

  • susnux
  • pytal
  • gretadoci
  • mejo-
  • artonge
  • max-nextcloud
  • st3iny
  • marcoambrosinii
  • icewind1991
  • skjnldsv
  • christophwurst
  • juliushaertl
  • nickvergessen