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;

Nextjs (v^13.4.2)

1. 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>
    </>
  );
}

2. 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>
  );
}
```.