Installation

Selon React / Next.js (App Router)

Cette bibliothèque peut être utilisée dans un environnement React pur et dans l'environnement Next.js App Router, le point d'entrée spécifique à Next.js prend en charge les versions de 14.2 à moins de 17.

rxjs (>= 7) et fast-deep-equal (3.1.3) sont inclus comme dépendances d'exécution de la bibliothèque, il n'est donc généralement pas nécessaire de les installer séparément.

Les définitions de type (.d.ts) sont incluses dans le package et peuvent être utilisées directement dans TypeScript.

Les styles sont importés dans les composants sur la base de CSS Modules et fonctionnent sans import CSS global séparé.

Exigences

React >= 18, React DOM >= 18peerDependencies
Next.js >= 14.2 < 17 est une dépendance optionnelle requise lors de l'utilisation de @byeolnaerim/flex-layout/next.

Installer

bash

# npm
npm i @byeolnaerim/flex-layout

# yarn
yarn add @byeolnaerim/flex-layout

# pnpm
pnpm add @byeolnaerim/flex-layout

Écran partagé URL Next.js

Pour déposer un page.tsx dans FlexLayoutSplitScreen de Next.js uniquement avec l'URL, utilisez @byeolnaerim/flex-layout/next et /next/generator. Cette configuration n'est pas nécessaire pour l'utilisation standard de FlexLayout.

tsx

import { FlexLayoutSplitScreenDragBox } from "@byeolnaerim/flex-layout/next";
import { generateFlexLayoutSplitScreenPageRegistry } from "@byeolnaerim/flex-layout/next/generator";

Note Next.js

@byeolnaerim/flex-layoutLes composants principaux sont déclarés en interne. "use client"Il est déclaré, donc il fonctionne même si importé directement dans un Server Component (ex: app/layout.tsx).

Si des erreurs se produisent en raison de l'inclusion dans le scope côté serveur selon la configuration de l'environnement/de la build, utilisez l'une des options ci-dessous.

Option 1. Créer un fichier wrapper client et exporter.

FlexLayoutClient.tsx

tsx

"use client";

export {
  FlexLayout,
  FlexLayoutContainer,
  FlexLayoutSplitScreen,
} from "@byeolnaerim/flex-layout";

Et dans le Server Component :

tsx

import {
  FlexLayout,
  FlexLayoutContainer,
  FlexLayoutSplitScreen,
} from "@/components/FlexLayoutClient";

Option 2. import dynamique

tsx

import dynamic from "next/dynamic";

const FlexLayout = dynamic(
  () => import("@byeolnaerim/flex-layout").then((m) => m.FlexLayout),
  { ssr: false }
);