rc-dialog-native
Render a modal with the dialog
html tag and take advantage of the native features of this tag
Description
- Allow press
ESC
key to close modal (native) - Allow click outside the modal to close (native)
- Allow disable
tabindex
the elements on the back of the modal - Allow close the modal on any moment programatically
Installation
Use npm to install this library
npm i rc-dialog-native
Props
Made with ts
and jsdoc
. Props autocomplete should be on the code editor.
Prop name | Description | Type | Required |
---|---|---|---|
forwardRef | Reference of the dialog tag. |
React.MutableRefObject | Yes |
title | Title label to display on the modal once it's open | JSX.Element|JSX.Element[]|null | No |
footer | Elements to render on the footer of the modal | JSX.Element|JSX.Element[]|null | No |
children | Content of the modal once it's open | JSX.Element|JSX.Element[]|null | No |
closeCallback | Function that will allow to close the modal. If it's provided, will render an "X" icon in order to close the modal | (()=>void)|null | No |
width | Width size (on viewport scale) for the modal on desktop and laptops devices | number | No |
Examples
React (No frameworks)
import { Dialog, useDialog } from "rc-dialog-native";
function App() {
const dialog = useDialog();
return (
<main>
<p onClick={dialog.showModal}>Read terms and conditions</p>
<Dialog
closeCallback={dialog.close}
forwardRef={dialog.forwardRef}
title={<p>Terms and conditions</p>}
width={25}
footer={<button onClick={dialog.close}>I'm agree</button>}
>
<ol>
<li>Do not be agressive</li>
<li>Do not disturbe on the community</li>
<li>Not allow to sell any kind of product or service</li>
</ol>
</Dialog>
</main>
);
}
export default App;
v^13.4.2
)
Nextjs (- Create a
Client Component
. Like the next below
"use client";
import React from "react";
import { Dialog, useDialog } from "rc-dialog-native";
export default function TermsAndConditions() {
const dialog = useDialog();
return (
<>
<button type="button" onClick={dialog.showModal}>
TermsAndConditions
</button>
<Dialog forwardRef={dialog.forwardRef}>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, quidem
quos? Nobis, et iure eaque ipsum quae eveniet totam magnam asperiores
suscipit autem delectus dolorum perferendis nostrum! Animi officia eum
</p>
</Dialog>
</>
);
}
- Import the component into a server or client component.
import TermsAndConditions from "./pages/TermsAndConditions";
// This is a server component
export default function Home() {
return (
<form>
<label htmlFor="">Email</label>
<input type="email" />
<TermsAndConditions />
</form>
);
}
```.