v3.3.1

Fixes

• Supported React Strict Mode by @dc7290 in #79

Future hook

• Added future.d.ts by @dc7290 in #77
• Set isModal to true by default by @dc7290 in #78

What's Changed

• Added future.d.ts by @dc7290 in #77
• Set isModal to true by default by @dc7290 in #78
• Supported React Strict Mode by @dc7290 in #79
• version 3.3.1 by @dc7290 in #80

Full Changelog: v3.3.0...v3.3.1

v3.3.0

New Future Hooks

A new useModal hook has been released.
Instead of returning a modal component constructed with a div element as before, it returns a modal component constructed with a dialog element.
Please note that the usage is almost the same, but some unnecessary options have been removed.

import { useModal } from 'react-hooks-use-modal/future'

const [Modal, open, close, isOpen] = useModal();

Features

• [feature] Modal components with element by @dc7290 in #73 By @dc7290

What's Changed

• Demo fix by @Nayte91 in #63
• [feature] Modal components with element by @dc7290 in #73
• Update release workflow by @dc7290 in #75
• version 3.3.0 by @dc7290 in #76

New Contributors

• @Nayte91 made their first contribution in #63

Full Changelog: v3.2.0...v3.3.0

v3.2.0

What's Changed

• Support React 18 and adjust the example code. by @kato83 in #65

New Contributors

• @kato83 made their first contribution in #65

Full Changelog: v3.1.0...v3.2.0

v3.1.0

Features

• The initialValue option allows you to set an initial value. By #59
• Custom modal component props that can be specified with the components option can now be passed as non-prescriptive props. By #60

What's Changed

• Add initialValue option. by @dc7290 in #59
• Add additionalProps props that can be specified in Modal. by @dc7290 in #60
• Update version 3.1.0 by @dc7290 in #62

Full Changelog: v3.0.1...v3.1.0

v3.0.1

Fixes

• Fixed unneeded side-effect cleanup when re-rendering occurred. By #57

What's Changed

• Fixed useFocusTrap's useEffect being activated when re-rendering by @dc7290 in #57
• Update version to 3.0.1 by @dc7290 in #58

Full Changelog: v3.0.0...v3.0.1

v3.0.0

Major version released 🎉.

This release primarily includes accessibility improvements, extensibility enhancements, and convenience improvements.

Breaking Changes.

The closeOnOverlayClick option is no longer used.

Previously, to prevent clicking outside of a modal from closing it, the

useModal('root', {
  closeOnOverlayClick: false
})

but starting with this release, it has been changed to following.

useModal('root', {
  focusTrapOptions: {
    clickOutsideDeactivates: false,
  },
})

This is because focus-trap, a library used internally to solve problems around focus traps, is also responsible for non-modal clicks.
Therefore, to prevent a click outside of a modal from trapping the modal, specify focusTrapOptions.

A warning is now issued when there is no single focusable element in the modal.

WAI-ARIA 1.1 states that there should be at least one focusable element in the modal.
As a workaround, if there is no focusable element in the modal, the focus is given to the containing element.
Reference: https://www.w3.org/TR/wai-aria-1.1/#dialog

Features

• A ModalProvider component has been implemented to share global settings. By #50 and #55 and #28
• The components option allows customization of the default modal elements. By #56
• Focus trapping is now automatic in the modal. by #46
  Sorry @dqn and @kuroppe1819.
  There were some considerations after merging the two PRs and we made the decision to use focus-trap.
• disable-scroll has been changed to body-scroll-lock. by #28 and #45

Fixes

• Fixed problem with modal close button not closing with space key. Related to #27
• Remove unnecessary z-index values.

What's Changed

• Improve accessibility by @dqn in #26
• Improve keyboard accessibility. by @kuroppe1819 in #31
• ESLintの設定に合わせて適切なパッケージをインストールする by @dc7290 in #42
• change scroll lock module by @yuki0410-dev in #28
• Bump nth-check from 2.0.0 to 2.0.1 by @dependabot in #30
• Bump follow-redirects from 1.14.1 to 1.14.8 by @dependabot in #35
• Bump nanoid from 3.1.25 to 3.3.4 by @dependabot in #43
• Bump terser from 4.8.0 to 4.8.1 by @dependabot in #41
• Bump eventsource from 1.1.0 to 1.1.1 by @dependabot in #40
• Bump async from 2.6.3 to 2.6.4 by @dependabot in #39
• Bump minimist from 1.2.5 to 1.2.6 by @dependabot in #38
• Bump url-parse from 1.5.3 to 1.5.10 by @dependabot in #37
• Adjust code style around scroll lock by @dc7290 in #45
• Bump node-forge and webpack-dev-server by @dependabot in #44
• Switch to focus-trap by @dc7290 in #46
• Add showCloseButton option. by @dc7290 in #47
• Allow global configuration with ModalConfig component by @dc7290 in #50
• v3.0.0 by @dc7290 in #51
• Delete unnecessary files by @dc7290 in #52
• Fixing paths in GitHub Pages by @dc7290 in #53
• The file structure of the examples page has been adjusted. by @dc7290 in #54
• ModalConfig→ModalProvider by @dc7290 in #55
• Feature components option by @dc7290 in #56

New Contributors

• @dqn made their first contribution in #26
• @dc7290 made their first contribution in #42
• @yuki0410-dev made their first contribution in #28

Full Changelog: v2.1.0...v3.0.0

v2.1.0

add option that don't close on overlay click. #24
Fix: webpack resolve extensions tsx -> .tsx #29

Change

Add closeOnOverlayClick options.

const [Modal, open, close, isOpen] = useModal('root', {
  preventScroll: true,
  closeOnOverlayClick: false
});

Special thunks. @Shinyaigeek and @kuroppe1819

v2.0.2

Change

fix: changed from memo to useCallback. #22

v2.0.1

Added TypeScript support. There are some changes.

Change

• Support TypeScript
• Added GitHub Actions
• Change from export default to export. When library importing, it will be as follows.

import { useModal } from 'react-hooks-use-modal'

• Change from babel to microbundle. Added some npm commands.

// build src
npm run build

// watch src
npm run watch

v1.1.0

• Added support for React v17.
• Updated some packages.