Fully customizable and accessible modal react component
npm install react-hyper-modalWelcome to the react hyper modal repository 😄
I want to introduce you to an awesome react component for displaying modal windows
!license


!min
!minzip
- Installation
- Usage
- Properties
- Default properties
- Types
- Contributing
- License
###### You can use  or  package managers
``console`
$ npm i --save react-hyper-modal`
__or__console`
$ yarn add react-hyper-modal
#### Controlled modal component
`javascript
import React from 'react';
import HyperModal from 'react-hyper-modal';
...
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
isModalOpen: false,
};
}
...
openModal => this.setState({ isModalOpen: true });
closeModal => this.setState({ isModalOpen: false });
...
render() {
const { isModalOpen } = this.state;
return (
requestClose={this.closeModal}
>
Your awesome modal content
);
}
}
`
#### Uncontrolled modal component
`javascript
import React from 'react';
import HyperModal from 'react-hyper-modal';
...
const MyComponent = () => {
return (
return (
);
}
/>
);
}
`
#### Stackable content example
To use stackable content you should use ModalStack component and children as function. Every child of ModalStack will represent a different layout.
`javascript
import React from 'react';
import HyperModal, { ModalStack, ModalStackProps } from 'react-hyper-modal';
...
const Component = () => {
const [index, setIndex] = React.useState(0)
return (
stackableIndex={index}
renderOpenButton={requestOpen => (
)}
>
{(props: ModalStackProps) => (
1
2
3
)}
)
}
`
##### \* - required for controlled modal component
Props | Description
------------ | -------------
afterClose | callback that is called after closing
ariaEnabled | enable ARIA properties
ariaProps | custom ARIA properties
beforeClose | callback that is called before closing
childrenMode | describing if the modal content should be rendered as React Children
classes | overriding default modal class names
closeDebounceTimeout | time to close modal
closeIconPosition | position of close button
closeOnCloseIconClick | close the modal by pressing close button
closeOnDimmerClick | close the modal by pressing on dimmer
closeOnEscClick | close the modal by pressing ESC
dimmerEnabled | describing if the dimmer should be shown or not
isFullscreen | describing if the modal should be shown in full screen or not
isOpen \* | describing if the modal should be shown or not
modalContentRef | reference to the modal content divdiv
modalWrapperRef | reference to the modal wrapper
portalMode | describing if the modal should be rendered in React Portal or not
portalNode | HTML node to create React Portal
position | setting the modal position
renderCloseIcon | callback for rendering custom close button
renderContent | callback for rendering custom modal content
renderOpenButton | callback or boolean describing if the modal should be uncontrolled component
requestClose \* | callback to close the modal
stackable | make content stackable
stackableIndex | stack length
stackContentSettings | stackable content settings
unmountOnClose | describing if the modal should be unmounted when close
javascript
{
ariaEnabled: true,
ariaProps: {
'aria-describedby': 'hyper-modal-description',
'aria-labelledby': 'hyper-modal-title',
role: 'dialog',
},
disableScroll: true,
childrenMode: true,
closeDebounceTimeout: 0,
closeIconPosition: {
vertical: 'top' as const,
horizontal: 'right' as const,
},
closeOnCloseIconClick: true,
closeOnDimmerClick: true,
closeOnEscClick: true,
dimmerEnabled: true,
isFullscreen: false,
portalMode: false,
position: {
alignItems: 'center' as const,
justifyContent: 'center' as const,
},
stackable: false,
stackableIndex: 0,
stackContentSettings: {
widthRatio: 4,
topOffsetRatio: 2,
transition: 'all 0.3s ease',
opacityRatio: 0.2,
}
}
`$3
`typescript
type TModalPosition = 'flex-start' | 'center' | 'flex-end';
type THorizontalPosition = 'left' | 'center' | 'right';
type TVerticalPosition = 'top' | 'middle' | 'bottom';interface IClassNamesProps {
closeIconClassName?: string;
contentClassName?: string;
dimmerClassName?: string;
portalWrapperClassName?: string;
wrapperClassName?: string;
}
interface IARIAProps {
'aria-describedby'?: string;
'aria-labelledby'?: string;
role?: string;
}
interface IPositionProps {
alignItems?: TModalPosition;
justifyContent?: TModalPosition;
}
interface ICloseIconPosition {
horizontal?: THorizontalPosition;
vertical?: TVerticalPosition;
}
interface IModalProps {
afterClose?: () => void;
ariaEnabled?: boolean;
ariaProps?: IARIAProps;
beforeClose?: () => void;
childrenMode?: boolean;
classes?: IClassNamesProps;
closeDebounceTimeout?: number;
closeIconPosition?: ICloseIconPosition;
closeOnCloseIconClick?: boolean;
closeOnDimmerClick?: boolean;
closeOnEscClick?: boolean;
dimmerEnabled?: boolean;
isFullscreen?: boolean;
isOpen: boolean;
modalContentRef?: React.RefObject;
modalWrapperRef?: React.RefObject;
portalMode?: boolean;
portalNode?: HTMLElement;
position?: IPositionProps;
renderCloseIcon?: () => JSX.Element | null | string;
renderContent?: () => JSX.Element | JSX.Element[] | null | string;
renderOpenButton?: boolean | ((requestOpen: () => void) => JSX.Element | string);
requestClose: () => void;
unmountOnClose?: boolean;
}
``Please make sure to update tests as appropriate.