okayy

A confirm dialog for React. One line. Beautiful.

Installation

npm install okayy

Usage

Render the Confirmer in the root of your app, then call confirm() anywhere.


import { Confirmer, confirm } from 'okayy';
import 'okayy/styles.css';

// Add Confirmer to your root layout
function App() {
  return (
    <div>
      <Confirmer />
      <button onClick={async () => {
        const ok = await confirm('Delete this item?');
        if (ok) deleteItem();
      }}>
        Delete
      </button>
    </div>
  )
}

Variants

Five built-in color schemes for every context. Each variant shows its own icon automatically.


const ok = await confirm('Are you sure you want to continue?');

Features

Powerful features built in. Alert mode, type-to-confirm, centered layout, and async loading.


await confirm.alert('Your session has expired. Please log in again.');

Why okayy?

Less code. Same power.

okayy — 3 lines


import { confirm } from 'okayy';

const ok = await confirm('Delete?');
if (ok) deleteItem();

Typical AlertDialog — 20+ lines


<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="outline">
      Delete
    </Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>
        Delete?
      </AlertDialogTitle>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>
        Cancel
      </AlertDialogCancel>
      <AlertDialogAction
        onClick={deleteItem}
      >
        Confirm
      </AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>