MotionHighlight

데이터로 만드는 탭·세그먼트·내비게이션. 하이라이트 하나가 선택으로 이동합니다.

웹React Native선택과 넘기기

직접 해 보기

예제를 준비하는 중…

JavaScript가 꺼져 있습니다. 아래 코드가 예제 전체입니다.

App.jsx

import { useState } from 'react';
import { MotionHighlight, motionTokens } from '@kkwaenggwari/animated-chorus';
import './styles.css';

const sections = [
  { id: 'overview', label: 'Overview', body: 'Totals for the last 30 days.' },
  { id: 'activity', label: 'Activity', body: 'Every change, newest first.' },
  { id: 'members', label: 'Members', body: 'Twelve people can edit this workspace.' },
  { id: 'billing', label: 'Billing', body: 'Next invoice on the 1st.' },
  { id: 'settings', label: 'Settings', body: 'Name, region and danger zone.' },
];

export default function App({ shape = 'pill', hover = true, spring = 'default' }) {
  const [tab, setTab] = useState('activity');
  const current = sections.find((section) => section.id === tab);

  return (
    <div className="stage">
      <MotionHighlight
        items={sections}
        value={tab}
        onValueChange={setTab}
        hover={hover}
        transition={motionTokens.spring[spring]}
        className={`tabs ${shape}`}
        itemClassName="tab"
        highlightClassName="highlight"
        renderItem={(section, { selected }) => (
          <span className={selected ? 'label on' : 'label'}>{section.label}</span>
        )}
      />
      <p className="body">
        <strong>{current.label}</strong> {current.body}
      </p>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  justify-items: center;
  gap: 22px;
  padding: 44px 20px;
}

/* One row like a real tab bar: on a narrow screen it scrolls sideways instead of wrapping. */
.tabs {
  display: flex;
  gap: 4px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  flex: none;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  background: none;
  font:
    650 15px system-ui,
    sans-serif;
  cursor: pointer;
}

.label {
  color: #5b616b;
  transition: color 0.2s;
}

.label.on {
  color: #0e2e24;
}

.pill {
  padding: 4px;
  border-radius: 999px;
  background: #eaf6f0;
}

.pill .highlight {
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 1px #cfe8dc;
}

.underline {
  border-bottom: 1px solid #cfe8dc;
}

.underline .highlight {
  border-bottom: 3px solid #176b52;
}

.block {
  gap: 6px;
}

.block .highlight {
  border-radius: 10px;
  background: #176b52;
}

.block .label.on {
  color: #fff;
}

.body {
  margin: 0;
  color: #5b616b;
}

.body strong {
  color: #0e2e24;
}

가장 짧은 사용법

Tabs.jsx

<MotionHighlight
  items={['Overview', 'Activity', 'Settings']}
  value={tab}
  onValueChange={setTab}
  hover
/>;

대신 처리하는 일

하이라이트 하나가 항목 사이를 이동하며 크기를 바꿉니다. 모양은 highlightClassName으로 정합니다.
항목은 items, 키는 getKey, 라벨은 renderItem에서 옵니다.
hover를 켜면 포인터를 따라가다가 선택으로 돌아옵니다.
항목이 여러 줄로 줄바꿈되어도 하이라이트가 따라갑니다.
글꼴 로딩과 레이아웃 변화는 자동으로 다시 측정합니다.

이럴 때 쓰세요

페이지 탭.
필터 막대.
설정 폼의 세그먼트 컨트롤.

Props

Prop	타입	기본값	설명
`items`	`readonly T[]`	`—`필수	내 데이터 배열.
`value`	`key \| null`	`—`필수	하이라이트할 항목의 키. `null`이면 하이라이트를 숨깁니다.
`onValueChange`	`(key, item) => void`		항목을 누르면 키와 항목으로 실행됩니다.
`getKey`	`(item) => string \| number`	`item.id`	항목의 고유하고 안정적인 키를 돌려줍니다. 기본값은 `item.id`, 문자열과 숫자는 그 값 자체입니다.
`renderItem`	`(item, { selected, index }) => ReactNode`	`item.label`	항목을 그립니다. 선택 여부를 받습니다.
`hover`	`boolean`	`false`	항목 위의 포인터를 따라가다 벗어나면 `value`로 돌아옵니다(웹).
`itemAs`	`element`	`'button'`	각 항목의 요소.
`itemClassName`	`string`		각 항목 요소의 클래스. 인라인 스타일은 `itemStyle`.
`highlightClassName`	`string`		하이라이트의 클래스. 인라인 스타일은 `highlightStyle`.
`transition`	`Transition`	`spring`	시간 곡선 `{ duration, easing }` 또는 스프링 `{ tempo: 'spring', spring }`. 스프링은 끊겨도 속도를 이어갑니다.

그 밖의 props는 그려지는 요소로 전달되므로 className, style, 이벤트 핸들러를 평소처럼 쓸 수 있습니다.

웹과 React Native

각 항목은 기본으로 button이며(itemAs로 바꿈), 누르면 onValueChange(key, item)이 실행됩니다.

React Native에서 항목은 Pressable이고, 위치는 네이티브 드라이버로, 크기는 JavaScript가 움직이는 안쪽 뷰로 처리합니다.