UI 뜯어쓰기

원하는 컴포넌트에서 useActivity(), useStack() 등의 상태를 이용해서 자유롭게 UI를 커스터마이징해요.

만약 @stackflow/plugin-basic-ui에서 제공되는 UI를 활용하고 싶으시다면, 제공되는 AppScreen 컴포넌트를 활용해요.

/**
 * MyActivity.tsx
 */
import { ActivityComponentType } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";
import { useFlow } from "./stackflow";

const MyActivity: ActivityComponentType = () => {
  const { push } = useFlow();

  const onClick = () => {
    push("Article", {
      title: "Hello",
    });
  };

  return (
    <AppScreen
      appBar={{
        title: "My Activity",
      }}
    >
      <div>
        My Activity
        <button onClick={onClick}>Go to article page</button>
      </div>
    </AppScreen>
  );
};

export default MyActivity;

혹시 UI 또는 로직을 확장하고 다른 개발자와 함께 공유하고 싶으신가요? 다음으로 넘어가서 플러그인 작성 방법에 대해서 알아봐요.