rc-dialog-native v1.0.9

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.

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