Page
Page is used to display the content of a page.
import { Page } from "narraleaf-react";
<Page id="about">
{/* These elements will be displayed */}
{/* Your content */}
</Page>
Props
id
The unique id of the page.
- Type:
string
children
The content of the page.
- Type:
React.ReactNode
className
The class name of the page.
- Type:
string
style
The CSS style of the page.
- Type:
React.CSSProperties
...rest
extends HTMLMotionProps<"div">
You can pass motion props to the page.
This motion behavior is provided by Motion (opens in a new tab).
- Type:
HTMLMotionProps<"div">
For example, you can add transitions between pages.
<Page
id="about"
// Motion props
initial={{ opacity: 0 }}
animate={{ opacity: 1, transition: { duration: 1 } }}
exit={{ opacity: 0, transition: { duration: 1 } }}
>
...
</Page>