美しいコンポーネントでより速く開発を
NextUI Pro

NextUI Provider

NextUIProvider の API リファレンスです。

インポート

使用法

import * as React from "react";
import {NextUIProvider} from "@nextui-org/react";


function App() {
  return (
    <NextUIProvider>
      <YourApplication />
    </NextUIProvider>
  );
}

プロパティ

navigate

  • 説明: Link、Menu、Tabs、Tableなど、ネストされたすべてのコンポーネントにクライアント側のルーターを提供します。
  • 型: ((path: string) => void) | undefined

locale

  • 説明: 子要素に適用するロケール。
  • 型: string | undefined
  • デフォルト: en-US

サポートされているロケールはこちらです。デフォルトでは、en-USです。

const localeValues = [
  'fr-FR', 'fr-CA', 'de-DE', 'en-US', 'en-GB', 'ja-JP',
  'da-DK', 'nl-NL', 'fi-FI', 'it-IT', 'nb-NO', 'es-ES', 
  'sv-SE', 'pt-BR', 'zh-CN', 'zh-TW', 'ko-KR', 'bg-BG', 
  'hr-HR', 'cs-CZ', 'et-EE', 'hu-HU', 'lv-LV', 'lt-LT', 
  'pl-PL', 'ro-RO', 'ru-RU', 'sr-SP', 'sk-SK', 'sl-SI', 
  'tr-TR', 'uk-UA', 'ar-AE', 'ar-DZ', 'AR-EG', 'ar-SA', 
  'el-GR', 'he-IL', 'fa-AF', 'am-ET', 'hi-IN', 'th-TH'
];

スペイン語ロケールを設定する例を次に示します。

"use client";


import {type ReactNode} from "react";
import {NextUIProvider} from "@nextui-org/react";


export function AppProvider(props: AppProviderProps) {
  const {children, className} = props;


  return (
    <NextUIProvider locale="es-ES" className={className}>
      {children}
    </NextUIProvider>
  );
}


interface AppProviderProps {
  children: ReactNode;
  className?: string;
}

defaultDates

  • 説明: カレンダーで選択できる日付のデフォルト範囲。
  • 型: { minDate?: CalendarDate | undefined; maxDate?: CalendarDate | undefined; }
  • デフォルト: { minDate: new CalendarDate(1900, 1, 1), maxDate: new CalendarDate(2099, 12, 31) }

createCalendar

  • 説明: この関数は、カスタムのカレンダーシステムを提供することで、バンドルサイズを削減するのに役立ちます。

    デフォルトでは、これは@internationalized/dateでサポートされているすべてのカレンダーシステムを含みます。ただし、アプリケーションがより限られた地域セットをサポートしている場合や、特定のカレンダーシステムで日付を選択することだけが分かっている場合は、これらのCalendar実装のサブセットを含む独自のcreateCalendarの実装を提供することで、バンドルサイズを削減できます。

    たとえば、アプリケーションがグレゴリオ暦の日付のみをサポートしている場合、次のようなcreateCalendar関数を実装できます。

    import {GregorianCalendar} from '@internationalized/date';
    

    function createCalendar(identifier) {
    switch (identifier) {
      case 'gregory':
        return new GregorianCalendar();
      default:
        throw new Error(`Unsupported calendar ${identifier}`);
    }
    }

    このようにすることで、GregorianCalendarのみがインポートされ、他のカレンダー実装はツリーシェイクできます。

  • 型: ((calendar: SupportedCalendars) => Calendar | null) | undefined

disableAnimation

  • 説明: アニメーションをグローバルに無効にします。これにより、バンドルにframer-motion機能がロードされるのを回避し、バンドルサイズを削減できる可能性があります。
  • 型: boolean
  • デフォルト: false

disableRipple

  • 説明: リップル効果をグローバルに無効にします。
  • 型: boolean
  • デフォルト: false

skipFramerMotionAnimations

  • 説明: アプリケーション内でframer-motionアニメーションをスキップするかどうかを制御します。このプロパティは、disableAnimationプロパティがtrueに設定されると自動的に有効になり(true)、すべてのframer-motionアニメーションが効果的にスキップされます。disableAnimationプロパティを他の目的で使用しながら、framer-motionアニメーションを保持するには、これをfalseに設定します。ただし、disableAnimationプロパティがtrueの場合、NextUIコンポーネントのアニメーションは依然として省略されることに注意してください。
  • 型: boolean
  • デフォルト: disableAnimationと同じ

validationBehavior

  • 説明: 値が不足しているか無効な場合に、フォームの送信を防ぐためにネイティブHTMLフォームの検証を使用するか、ARIAを介してフィールドを必須または無効としてマークするかどうか。
  • 型: native | aria
  • デフォルト: aria

型

CalendarDate

  • 説明: CalendarDateは、@internationalized/dateの特定のカレンダーシステムにおける時間コンポーネントのない日付を表します。
  • 型: import {CalendarDate} from '@internationalized/date';

SupportedCalendars

サポートされているreact-aria i18nカレンダー。

type SupportedCalendars =
  | "buddhist"
  | "ethiopic"
  | "ethioaa"
  | "coptic"
  | "hebrew"
  | "indian"
  | "islamic-civil"
  | "islamic-tbla"
  | "islamic-umalqura"
  | "japanese"
  | "persian"
  | "roc"
  | "gregory";
NextUI CLI