examples: add 6 new over-engineering survivors + platform-native guide (#109)
New examples (examples/): - modal-dialog: <dialog> vs Radix/react-modal - url-params: URLSearchParams vs query-string - number-formatting: Intl.NumberFormat vs numeral - infinite-scroll: IntersectionObserver vs react-infinite-scroll-component - deep-clone: structuredClone vs lodash.cloneDeep / JSON hack - group-by: Object.groupBy vs lodash.groupBy New doc (docs/platform-native.md): Comprehensive reference of platform-native solutions across HTML elements, CSS, Browser APIs, Node.js stdlib, Python stdlib, and database features. Covers 60+ cases where the platform already has what developers reach for a package to do.
This commit is contained in:
@@ -0,0 +1,62 @@
|
||||
# Modal Dialog
|
||||
|
||||
**Task:** "Add a modal dialog for the delete confirmation."
|
||||
|
||||
## Without Ponytail
|
||||
|
||||
```bash
|
||||
npm install @radix-ui/react-dialog
|
||||
# or: npm install react-modal
|
||||
```
|
||||
|
||||
```jsx
|
||||
import * as Dialog from "@radix-ui/react-dialog";
|
||||
import { useState } from "react";
|
||||
|
||||
export function DeleteModal({ onConfirm, onCancel }) {
|
||||
return (
|
||||
<Dialog.Root>
|
||||
<Dialog.Trigger asChild>
|
||||
<button className="btn-danger">Delete</button>
|
||||
</Dialog.Trigger>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Overlay className="dialog-overlay" />
|
||||
<Dialog.Content className="dialog-content">
|
||||
<Dialog.Title>Confirm deletion</Dialog.Title>
|
||||
<Dialog.Description>This action cannot be undone.</Dialog.Description>
|
||||
<div className="dialog-actions">
|
||||
<Dialog.Close asChild>
|
||||
<button onClick={onCancel}>Cancel</button>
|
||||
</Dialog.Close>
|
||||
<button className="btn-danger" onClick={onConfirm}>Delete</button>
|
||||
</div>
|
||||
</Dialog.Content>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
A dependency, a portal, an overlay, a root, a trigger, a content wrapper — to show a box with two buttons.
|
||||
|
||||
## With Ponytail
|
||||
|
||||
```html
|
||||
<!-- ponytail: browser has one, with focus trapping and backdrop built in -->
|
||||
<dialog id="confirm-delete">
|
||||
<p>This action cannot be undone.</p>
|
||||
<button id="cancel">Cancel</button>
|
||||
<button id="confirm">Delete</button>
|
||||
</dialog>
|
||||
```
|
||||
|
||||
```js
|
||||
const dialog = document.getElementById("confirm-delete");
|
||||
document.getElementById("cancel").onclick = () => dialog.close();
|
||||
document.getElementById("confirm").onclick = () => { onConfirm(); dialog.close(); };
|
||||
|
||||
// Open it:
|
||||
dialog.showModal();
|
||||
```
|
||||
|
||||
**1 dependency + 30 lines → 0 dependencies + 8 lines.** The native `<dialog>` traps focus automatically, closes on Escape, renders a backdrop via `::backdrop`, and is accessible by default. All browsers since 2022. The library was solving a problem the platform solved.
|
||||
Reference in New Issue
Block a user