2.3.0 • Published 1 year ago
modal-rt v2.3.0
Modal-RT
Mount <Modal />
Component in any component (Root component prefered)
src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Modal } from 'modal-rt';
const App = () => {
return (
<div>
<h1>Hello, React!</h1>
<Modal />
</div>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
Use modal
api from any component
src/components/component.tsx
import React from 'react';
import { modal } from 'modal-rt';
interface Props {
name: string;
}
const Component: React.FC<Props> = ({ name }) => {
const revealModal = () => {
modal(<div>Hello</div>)
}
return (
<div>
<h1>Hello, {name}!</h1>
<button
onClick={revealModal}
>Reveal Modal</button>
</div>
);
};
export default Component;
Api
Api | Type | Value | Description |
---|---|---|---|
modal() | string , JSX.Element or function | Default null | Text or React component which to be showed in the modal. |
modal.close(id) | string | default undefined | Close a modal by providing modal id as parameter. If id id is undefined it will close all active modal. |
Options for modal api
modal(<div>Hey</div>, options)
Options
{
animation: true or false
customTrigger: true or false,
}
Option | Type | Value | Description |
---|---|---|---|
animation | boolean | Default true | Triggers Zoom-In and Zoom-Out animation |
customTrigger | boolean | default false | Triggers default close button. Custom close funtionality can be achived. See advanched. |
Advanched
A function which returns a React component or JSX.Element can also be passed in modal()
function.
The function will receive a modal object which has a id property.
Example:
import React from 'react';
import { modal } from 'modal-rt';
interface Props {
name: string;
}
const Component: React.FC<Props> = ({ name }) => {
const revealModal = () => {
modal((modal) => <Component2 id={modal.id} />, { customTrigger: true })
}
return (
<div>
<h1>Hello, {name}!</h1>
<button
onClick={revealModal}
>Reveal Modal</button>
</div>
);
};
export default Component;
interface Props2 {
id: string;
}
const Component2: React.FC<Props2> = ({ id }) => {
const close = () => {
modal.close(id)
}
return (
<div>
<h1>Hello, Modal!</h1>
<button
onClick={close}
>Close</button>
</div>
);
};
export Component2;
1.0.1
1 year ago
0.21.0
1 year ago
0.20.0
1 year ago
2.3.0
1 year ago
0.19.0
1 year ago
2.2.0
1 year ago
0.17.0
1 year ago
2.0.0
1 year ago
0.18.0
1 year ago
0.10.0
1 year ago
0.9.0
1 year ago
0.8.0
1 year ago
0.7.0
1 year ago
0.6.0
1 year ago
0.5.0
1 year ago
0.4.0
1 year ago
0.3.0
1 year ago
0.2.0
1 year ago
0.1.0
1 year ago
1.1.0
1 year ago
1.12.0
1 year ago
1.11.0
1 year ago
1.10.0
1 year ago
1.9.0
1 year ago
1.8.0
1 year ago
1.6.3
1 year ago
1.6.1
1 year ago
1.6.0
1 year ago
1.5.0
1 year ago
1.4.0
1 year ago
1.3.0
1 year ago
1.2.0
1 year ago
1.0.2
1 year ago