StringsProvider

StringsProvider는 Todae가 스스로 쓰는 텍스트를 그 안의 모든 요소에 대해 설정합니다. 아이콘만 있는 Dialog.Close처럼 자체 글자가 없는 파트의 기본 이름과, Field.Counter의 메시지 같은 스크린 리더 메시지가 여기에 속합니다. Todae는 영어만 제공합니다. 바꿀 키만 전달하세요. 생략한 키는 가장 가까운 상위 StringsProvider에서, 없으면 영어에서 가져옵니다. 요소는 렌더링하지 않습니다.

const korean: Partial<Strings> = {
	close: '닫기',
	dismiss: '닫기',
	removeChip: (label) => `${label} 삭제`,
	moreChips: (count) => `${count}개 더 있음`,
	characterLimit: (max) => `최대 ${max}자`,
	charactersLeft: (remaining) => `${remaining}자 남음`,
	characterLimitReached: '글자 수 한도에 도달했습니다',
}

<StringsProvider strings={korean}>
	<App />
</StringsProvider>

중첩한 provider는 자신이 전달한 키만 바꿉니다.

<StringsProvider strings={korean}>
	<StringsProvider strings={{ close: '취소' }}>
		{/* close is 취소 here; every other key is still Korean. */}
	</StringsProvider>
</StringsProvider>

파트 자체의 prop이 provider보다 여전히 우선합니다. 닫기 버튼이나 랜드마크의 비어 있지 않은 aria-label, Chip.Root의 removeLabel, ChipList.Root의 removeLabel, overflowLabel, panelLabel, Field.ChipInput의 chipRemoveLabel, overflowLabel, useCombobox의 createLabel이 그렇습니다. useStrings()는 현재 적용되는 문자열을 반환하므로 직접 만든 컴포넌트에서 쓸 수 있습니다.

문자열

숫자나 레이블에 따라 달라지는 문자열은 함수입니다.

| 키 | 쓰는 곳 | 영어 | | --- | --- | --- | | close | 글자가 없는 Dialog.Close, BottomSheet.Close | Close | | dismiss | 글자가 없는 Alert.Close, Toast.Close | Dismiss | | notifications | Toast.Region 랜드마크 | Notifications | | breadcrumbs | Breadcrumbs.Root 랜드마크 | Breadcrumb | | pagination | Pagination.Root 랜드마크 | Pagination | | resizeSheet | BottomSheet.Grabber | Resize sheet | | options | useCombobox의 getSheetProps() | Options | | removeChip(label) | 칩 제거 버튼 | Remove {label} | | moreChips(count) | +N 칩 | {count} more | | moreChipsPanel(count) | 접힌 칩이 담긴 ChipList 팝오버 | {count} more chips, 1개일 때 1 more chip | | characterLimit(max) | Field.Counter, 입력의 설명 | Up to {max} characters | | charactersLeft(remaining) | Field.Counter, 20자 이하로 남았을 때 | {remaining} characters left, 1자일 때 1 character left | | characterLimitReached | Field.Counter, 한도에 도달했거나 넘었을 때 | Character limit reached | | createOption(query) | createLabel이 없을 때 useCombobox의 만들기 행 | Create "{query}" |

서버 엔트리 @tounsoo/todae/breadcrumbs와 @tounsoo/todae/pagination의 Breadcrumbs와 Pagination은 컨텍스트 없이 서버에서 렌더링되므로 항상 영어를 씁니다. aria-label을 전달하거나, provider를 쓰려면 @tounsoo/todae에서 가져오세요.

언제 쓰나요

언제: 앱이 영어가 아니거나, 앱 전체나 일부에서 Todae 자체 텍스트의 표현을 바꾸고 싶을 때.

쓰지 않을 때: 파트 하나의 이름 → aria-label 같은 그 파트의 prop을 전달하세요. 대화상자 제목처럼 직접 쓰는 텍스트 → 직접 번역하면 됩니다.

Props