React-composition-sample

UI Composition

• Separation of responsibilities
• Loose Coupling
• Scalability

Demo

https://react-composition-sample.vercel.app/

Getting Started

yarn install

yarn dev

Bottom sheet sample

Shared Component (design system sample)

BottomSheet.tsx

• BottomSheet
• BottomSheet.Dimmed
• BottomSheet.Paper
• BottomSheet.Header
• BottomSheet.Body
• BottomSheet.Actions

State

bottomSheetState.ts

• element
• options

Hook

useBottomSheet.tsx

set bottom sheet state.

• open
• close

Service Layer

BottomSheetLayer.tsx

effected by state.

<BottomSheet>
  <BottomSheet.Dimmed />
  <BottomSheet.Paper>
    {state.element}
  </BottomSheet.Paper>
</BottomSheet>

Usage

open bottom sheet.

use hook(set element).

const { open } = useBottomSheet();

open(
  <>
    <BottomSheet.Header title="Caution" />
    <BottomSheet.Body>Hello</BottomSheet.Body>
    <BottomSheet.Actions><button>Primary</button></BottomSheet.Actions>
  </>
);

Used

• Next.js
• Recoil
• Emotion css props