turn-ts-next
v0.1.1
Published
The Next.js App Router client boundary for turn-ts. Import the page-flip book straight from a Server Component.
Maintainers
cyclingfounderReadme
turn-ts-next
The Next.js App Router client boundary for turn-ts.
Import TurnBook straight into a Server Component; the 'use client' line is this package's job,
not yours.
[!IMPORTANT] Not open source. Non-commercial use only. The runtime dependency
turn-tsis a derivative of turn.js (3rd release), whose licence permits use "solely for personal benefit and not for any commercial purpose or for monetary gain." That restriction reaches this package through the dependency and cannot be removed here. Read LICENSE.md before installing.
Install
npm i turn-ts-nextnext ^16, react ^19 and react-dom ^19 are peer dependencies. turn-ts and turn-ts-react
are direct dependencies — you never install them yourself, but you do import turn-ts's
stylesheet, and having it as a direct dependency is what guarantees that specifier resolves from
your app no matter how your package manager hoists.
Use
Import the stylesheet once, in the root layout:
// app/layout.tsx — a Server Component
import 'turn-ts/turn-ts.css';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}Then use the book anywhere, including from a Server Component, with no 'use client' of your own:
// app/notes/page.tsx — a Server Component. No directive needed.
import { TurnBook, TurnPage } from 'turn-ts-next';
export default async function NotesPage() {
const notes = await getNotes();
return (
<TurnBook width={840} height={560} display="double" role="region" aria-label="Field notes">
{notes.map((note) => (
<TurnPage key={note.id}>
<h2>{note.title}</h2>
<p>{note.body}</p>
</TurnPage>
))}
</TurnBook>
);
}turn-ts/turn-ts.css is not optional and is not bundled here — it carries the rules the fold needs
and, just as importantly, leaves out the ones that break it (no overflow, no contain, no
perspective on the container).
Anything that needs a handler — page, onPageChange, ref, onKeyDown — has to be passed from
a Client Component, because functions do not cross the server/client boundary. That is a React
rule, not this package's:
'use client';
import { useRef, useState } from 'react';
import { TurnBook, TurnPage, type TurnBookApi } from 'turn-ts-next';
export function ControlledBook({ children }: { children: React.ReactNode }) {
const [page, setPage] = useState(1);
const book = useRef<TurnBookApi>(null);
return (
<>
<TurnBook ref={book} width={840} height={560} page={page} onPageChange={setPage}>
{children}
</TurnBook>
<button onClick={() => book.current?.previous()}>Back</button>
<button onClick={() => book.current?.next()}>Next</button>
</>
);
}Server-rendered <TurnPage> elements can still be passed into that as children — they are
rendered output, not functions.
What this package is
One module, one directive, named re-exports:
'use client';
export { BOOK_CLASS, PAGE_CLASS, PAGE_CONTENT_CLASS, TurnBook, TurnPage, WRAPPER_CLASS } from 'turn-ts-react';
export type { /* the full turn-ts type surface, plus TurnBookProps and TurnPageProps */ } from 'turn-ts-react';Never export *. A star re-export leaves the bundler with no export names to turn into client
references at build time, so the App Router wants a client boundary to say what it exposes.
src/index.test.ts fails if one appears in the source, and scripts/check-dist.mjs fails if one
appears in the build or if the directive does not survive it.
turn-ts-react already ships its own 'use client' and works in the App Router directly. Depend
on this package instead when you want the boundary to be an explicit, checked artifact of your
dependency graph rather than a property of someone else's build output.
API
Identical to turn-ts-react — TurnBook, TurnPage,
and the class-name constants, re-exported unchanged. See that package's README for props, events,
the TurnBookApi on ref, and the styling and accessibility notes.
Develop
npm install
npm run lint # typecheck + tests + build + "use client" check + publintturn-ts-react must be built (npm run build in that package) before the tests here can resolve
it, since they import through its published exports map. In a monorepo checkout, build it first
or link it with npm link.
License
Non-commercial. See LICENSE.md — turn.js 3rd release terms, inherited through
turn-ts.