![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
@weahead/react-customizable-modal
Advanced tools
Readme
A fully customizable and accessable react modal with hook primitives.
There are several modal implementations in react, but none of them offered the flexibility to have total controll of the components being rendered so that you could use what ever animation library we wanted.
Default builtin Modal Animated modal with react-spring Swipe up from below
import { Modal } from "@weahead/react-customizable-modal";
function App() {
const [isOpen, setIsOpen] = useState(false);
return (
<div>
<button
onClick={() => {
setIsOpen(true);
}}
>
Open modal
</button>
<Modal
isOpen={isOpen}
onEscape={() => {
setIsOpen(false);
}}
onOverlayClick={() => {
setIsOpen(false);
}}
>
<button
onClick={() => {
setIsOpen(false);
}}
>
Close
</button>
</Modal>
</div>
);
}
CustomModal.jsx
import React from "react";
import {
useTrapFocus,
useBodyScrollLock,
useCloseOnEsc,
ModalPortal
} from "react-customizable-modal";
function Overlay({ children }) {
return (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
position: "fixed",
top: 0,
bottom: 0,
left: 0,
right: 0
}}
>
{children}
</div>
);
}
export default function CustomModal({ isOpen, onClose, children }) {
useBodyScrollLock();
useCloseOnEsc(onClose);
const modalRef = useTrapFocus();
return (
isOpen && (
<ModalPortal id={`customModal`}>
<Overlay>
<div
ref={modalRef}
style={{
width: 500,
height: 400,
backgroundColor: "#fff",
padding: 20,
position: "absolute"
}}
>
<button onClick={onClose}>Close modal</button>
{children}
</div>
</Overlay>
</ModalPortal>
)
);
}
App.jsx
import CustomModal from "CustomModal.jsx";
function App() {
const [isOpen, setIsOpen] = useState(false);
return (
<div>
<button
onClick={() => {
setIsOpen(true);
}}
>
Open modal
</button>
<CustomModal
isOpen={isOpen}
onClose={() => {
setIsOpen(false);
}}
>
This is a custom modal
</CustomModal>
</div>
);
}
npm i @weahead/react-customizable-modal
OR
yarn add @weahead/react-customizable-modal
a simple wrapper around React.createPortal
function, but it also removes the div from the DOM on unmount
Prop | Required | Description |
---|---|---|
id | yes | this will give the DOMnode that is created to hold the modal content an id if there already is a DOMnode with that id it will reuse that for the new modal |
children | yes | This is the content of the portal, usually the entire modal, including the overlay |
A basic Modal component ready for use, if you dont want to implement your own. it uses only the hooks and components from this packagfe
Prop | Required | Description |
---|---|---|
id | yes | this will give the DOMnode that is created to hold the modal content an id if there already is a DOMnode with that id it will reuse that for the new modal |
isOpen | yes | this will be used to create the portal for the modal and mount the modal |
role | no | for a11y purposes we can set the role for our modal, it defaults to dialog |
ariaHideApp | no | sets a aria hide on the div with id of 'root' |
shouldFocusAfterRender | no | defaults to true and sets the focus on the modal div |
onOverlayClick | no | lets you pass in a function that is triggered when clicking on the overlay, you might want to pass a function that sets the isOpen prop to false IE closing the modal |
shouldReturnFocusAfterClose | no | defaults to true , will return focus to last focus element before the modal was opened |
onEscape | no | lets you pass a function to that is triggered if you press the ESC key while the modal is active, often you want to close the modal |
children | yes | the content of the modal |
import {useTrapFocus} from '@weahead/react-customizable-modal'
used to trap focus inside of the modal component
const modalRef = useTrapFocus(options);
// returns a ref that needs to be given to the element that you want to trap focus within
<div ref={modalRef}>focus will be trapped in this div</div>;
option | required | description |
---|---|---|
focusOnRender | no | defaults to true , will focus the modal container |
returnFocus | no | defaults to true , will return focus to last focused element when the component that uses this hook unmounts |
import {useAriaHide} from '@weahead/react-customizable-modal'
sets the aria-hidden
attribute on the element with the id passed in and removes is when the component that uses this hook is unmounted
useAriaHide(id); //often `id` would be 'root'
argument | required | description |
---|---|---|
id | yes | add the aria-hide attribute to the element with the id |
import {useBodyScrollLock} from '@weahead/react-customizable-modal'
this is taken from usehooks all credit goes to them. it locks the body from scrolling while the component that uses this hook is rendered.
useBodyScrollLock();
import {useHandleKeyPress} from '@weahead/react-customizable-modal'
this hook is used by the useCloseOnEsc
hook and other internal components
it lets you provide a function that is executed on every keypress while the component that uses this hook is mounted
useHandleKeyPress(e => {
console.log(e.keyCode);
});
argument | required | description |
---|---|---|
callback | yes | gets called with every keypress |
import {useCloseOnEsc} from '@weahead/react-customizable-modal'
this hook is used by the useHandleKeyPress
hook but only triggers the callback if the escape key is pressed
useCloseOnEsc(() => {
console.log("ESC key was pressed");
});
argument | required | description |
---|---|---|
callback | yes | gets called when escape is pressed |
https://github.com/reactjs/react-modal https://github.com/davidtheclark/tabbable/blob/master/index.js https://github.com/davidtheclark/focus-trap#focustrap--createfocustrapelement-createoptions
FAQs
A fully customizable and accessable react modal with hook primitives.
The npm package @weahead/react-customizable-modal receives a total of 60 weekly downloads. As such, @weahead/react-customizable-modal popularity was classified as not popular.
We found that @weahead/react-customizable-modal demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 9 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.