rc-dialog-native
TypeScript icon, indicating that this package has built-in type declarations

1.0.9 • Public • Published

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

Package Sidebar

Install

npm i rc-dialog-native

Weekly Downloads

5

Version

1.0.9

License

MIT

Unpacked Size

25.4 kB

Total Files

26

Last publish

Collaborators

  • programador51