k8ordo
  • UI
  • Form
  • State
  • Router
  • Static
  • Server
ダークモードに切り替え
  • Get Started
  • Theming
  • i18n
  • Components
  • Hooks
  • Helpers
  • AI
ナビゲーションを開く
スタイリング
  • cn
React
  • mergeRefs
  • mergeProps
  • chain
  • createSafeContext
k8ordo

Baselineに入った機能を、制限なく使うReactのライブラリ群。

パッケージ
  • @k8ordo/ui
  • @k8ordo/form
  • @k8ordo/state
  • @k8ordo/router
  • @k8ordo/static
  • @k8ordo/server
UI
  • Get Started
  • Theming
  • i18n
  • Components
  • Hooks
  • Helpers
  • AIチャット
  • Generative UI
  • AIエージェント
  • Storybook
リソース
  • GitHub
  • npm

© 2026 k8o — MIT License

組版 — Noto Sans JP / M PLUS 2

Helpers

スタイリング
  • cn
React
  • mergeRefs
  • mergeProps
  • chain
  • createSafeContext

createSafeContext

Provider外アクセス時に明確にthrowするContextを作るユーティリティ

インポート

使い方

基本的な使い方

縦書きプレビューに切り替え

パラメーター

errorMessage
Type: string
Default: -
PropTypeDefault
errorMessagestring-

戻り値

[Context, useSafeContext]
Type: readonly [Context<T | null>, () => T]
Default: -
PropTypeDefault
[Context, useSafeContext]readonly [Context<T | null>, () => T]-
count: 0
import { createSafeContext } from '@k8ordo/ui';
const [CounterContext, useCounter] = createSafeContext<CounterValue>(
  'useCounter must be used within CounterProvider',
);

const Provider: FC<PropsWithChildren> = ({ children }) => (
  <CounterContext value={...}>{children}</CounterContext>
);

const Child = () => {
  const { count } = useCounter(); // throws if used outside Provider
  return <span>{count}</span>;
};