Instalação

Baseado em React / Next.js (App Router)

Esta biblioteca pode ser usada em ambientes React puros e no ambiente Next.js App Router, com o ponto de entrada exclusivo do Next.js suportando versões de 14.2 a menos de 17.

rxjs (>= 7) e fast-deep-equal (3.1.3) estão incluídos como dependências de tempo de execução da biblioteca, portanto, normalmente não é necessário instalá-los separadamente.

As definições de tipo (.d.ts) estão incluídas no pacote e podem ser usadas diretamente no TypeScript.

Os estilos são importados nos componentes com base em CSS Modules e funcionam sem a necessidade de importação global de CSS.

Requisitos

React >= 18, React DOM >= 18peerDependencies
Next.js >= 14.2 < 17 é uma dependência opcional necessária ao usar @byeolnaerim/flex-layout/next.

Instalar

bash

# npm
npm i @byeolnaerim/flex-layout

# yarn
yarn add @byeolnaerim/flex-layout

# pnpm
pnpm add @byeolnaerim/flex-layout

Tela Dividida de URL do Next.js

Para arrastar o page.tsx para o FlexLayoutSplitScreen no Next.js apenas com a URL, use @byeolnaerim/flex-layout/next e /next/generator. Esta configuração não é necessária para o uso padrão do FlexLayout.

tsx

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

Nota do Next.js

@byeolnaerim/flex-layoutOs principais componentes são internamente "use client"declarados, permitindo que sejam importados e renderizados diretamente em um Server Component (ex: app/layout.tsx).

Se ocorrer um erro devido a problemas como inclusão no escopo do lado do servidor, dependendo da configuração do ambiente/construção, use uma das opções abaixo.

Opção 1. Crie um arquivo wrapper do cliente para exportar

FlexLayoutClient.tsx

tsx

"use client";

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

E no Server Component:

tsx

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

Opção 2. importação dinâmica

tsx

import dynamic from "next/dynamic";

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