react-sheet-layer-router v0.2.3

Introduction

Zustand와 Framer Motion기반의 History 탐색을 지원하는 React Sheet Layer입니다. Framer Motion의 Variant로 손쉽게 Sheet Layer의 Mount, Unmount 애니메이션을 변경할 수 있습니다.

Install

npm install react-sheet-layer-router

Peer dependencies

Layer 요소의 애니메이션을 Framer Motion으로 구현합니다. 따라서, framer-motion도 함께 설치해 주세요.

npm install framer-motion

Getting started

Basic usage

import {
  SheetLayerRoute,
  SheetLayerRouteProvider,
  useSheetLayerRouter,
  mainAnimationVariants,
  subAnimationVariants,
} from "react-sheet-layer-router";

const Home = () => {
  const sheetLayerRouter = useSheetLayerRouter();

  const closeOwnLayer = () => {
    sheetLayerRouter.push(null);
  };

  const openHomeOverviewLayer = () => {
    sheetLayerRouter.push("home.overview");
  };

  return (
    <section>
      <h1>HOME</h1>

      <button onClick={closeOwnLayer}>Close Layer</button>
      <button onClick={openHomeOverviewLayer}>Open Home Overview Layer</button>
    </section>
  );
};

const HomeOverview = () => {
  const sheetLayerRouter = useSheetLayerRouter();

  const closeOwnLayer = () => {
    sheetLayerRouter.push("home");
  };

  return (
    <section>
      <h1>HOME OVERVIEW</h1>

      <button onClick={closeOwnLayer}>Close Layer</button>
    </section>
  );
};

const Main = () => {
  const sheetLayerRouter = useSheetLayerRouter();

  const openHomeLayer = () => {
    sheetLayerRouter.push("home");
  };

  return (
    <main>
      <button onClick={openHomeLayer}>OPEN LAYER</button>

      <p>Main Page Contents...</p>
    </main>
  );
};

const App = () => {
  return (
    <>
      <Main />

      <SheetLayerRouteProvider baseZIndex={1000}>
        <SheetLayerRoute
          routeId="home"
          contentElement={<Home />}
          animationVariants={mainAnimationVariants}
        />

        <SheetLayerRoute
          routeId="home.overview"
          contentElement={<HomeOverview />}
          animationVariants={subAnimationVariants}
        />
      </SheetLayerRouteProvider>
    </>
  );
};

export default App;

With custom animations

import {
  SheetLayerRoute,
  SheetLayerRouteProvider,
  useSheetLayerRouter,
  SheetAnimationVariants,
} from "react-sheet-layer-router";

/** @type {SheetAnimationVariants} */
const customAnimationVariants = {
  /**
   * SheetLayerRoute의 애니메이션은 Label "opened", "closed"의 Variants를 기준으로 재생됩니다.
   * Variants의 작성 방법은 Framer-Motion의 공식 문서를 참조하세요.
   *
   * @see https://www.framer.com/motion/animation/#variants
   */
  opened: {
    transform: "scale(1)",
    opacity: 1,
    transition: {
      duration: 0.3,
      ease: "backOut",
    },
  },
  closed: {
    transform: "scale(0.85)",
    opacity: 0.5,
    transition: {
      duration: 0.2,
      ease: "backIn",
    },
  },
};

const Main = () => {
  const sheetLayerRouter = useSheetLayerRouter();

  const openHomeLayer = () => {
    sheetLayerRouter.push("custom-animation");
  };

  return (
    <main>
      <button onClick={openHomeLayer}>OPEN LAYER</button>

      <p>Main Page Contents...</p>
    </main>
  );
};

const App = () => {
  return (
    <>
      <Main />

      <SheetLayerRouteProvider>
        <SheetLayerRoute
          routeId="custom-animation"
          contentElement={<div>layer contents...</div>}
          animationVariants={customAnimationVariants}
        />
      </SheetLayerRouteProvider>
    </>
  );
};

export default App;

Customizing CSS

구성 요소는 다음 스타일 선택자로 커스터마이징 할 수 있습니다.

.react-sheet-layer-route-layer {
  /** layer styles... */
}

.react-sheet-layer-route-backdrop {
  /** backdrop styles.. */
}

API

SheetLayerRouteProvider

SheetLayerRoute 요소들에게 Context를 전달하는 컴포넌트입니다.

Properties

SheetLayerRoute

Sheet Layer Router에서 routeId에 따라 Sheet Layer를 렌더링하는 컴포넌트입니다.

Properties

useSheetLayerRouter

Sheet Layer Router의 현재 Location 정보에 접근하거나, History 상태를 변경할 수 있는 Hook입니다.

Properties