mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
StevenandGitHub
4466ba436b
## Description This PR ensures that the default prettier config is used for examples and templates. This config is compatible with `prettier@3` as well (upgrading prettier is bigger change that can be a future PR). ## Changes - Updated `.prettierrc.json` in root with `"trailingComma": "es5"` (will be needed upgrading to prettier@3) - Added `examples/.prettierrc.json` with default config (this will change every example) - Added `packages/create-next-app/templates/.prettierrc.json` with default config (this will change every template) ## Related - Fixes #54402 - Closes #54409
61 lines
1.6 KiB
JavaScript
61 lines
1.6 KiB
JavaScript
import { useState } from "react";
|
|
import { UniversalPortal } from "@jesstelford/react-portal-universal";
|
|
|
|
const Index = () => {
|
|
const [isOpen, toggle] = useState(true);
|
|
|
|
return (
|
|
<>
|
|
{/* A portal that is adjacent to its target */}
|
|
<div id="target" />
|
|
<UniversalPortal selector="#target">
|
|
<h1>Hello Portal</h1>
|
|
</UniversalPortal>
|
|
|
|
{/* Open a modal in a portal that is elsewhere in the react tree */}
|
|
<button onClick={() => toggle(!isOpen)} type="button">
|
|
Open Modal
|
|
</button>
|
|
{isOpen && (
|
|
<UniversalPortal selector="#modal">
|
|
<div
|
|
style={{
|
|
position: "fixed",
|
|
backgroundColor: "rgba(0, 0, 0, 0.7)",
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
left: 0,
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
backgroundColor: "white",
|
|
position: "absolute",
|
|
top: "10%",
|
|
right: "10%",
|
|
bottom: "10%",
|
|
left: "10%",
|
|
padding: "1em",
|
|
}}
|
|
>
|
|
<p>
|
|
This modal is rendered using{" "}
|
|
<a href="https://www.npmjs.com/package/@jesstelford/react-portal-universal">
|
|
<code>@jesstelford/react-portal-universal</code>
|
|
</a>
|
|
.
|
|
</p>
|
|
<button type="button" onClick={() => toggle(!isOpen)}>
|
|
Close Modal
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</UniversalPortal>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Index;
|