componente · @solu30/ui-kit/input

PeriodSelector

El componente, montado

Cargando el componente del paquete instalado…

Cargando el chunk del paquete instalado…

De dónde se importa

import { PeriodSelector } from '@solu30/ui-kit/input'

Props

7 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
value	sí	`string`	Currently selected period key
onChange	sí	`(value: string) => void`	Callback fired when a preset is selected
presets	opcional	`PeriodPreset[]`	Presets to show. Defaults to today/week/month/quarter/year + custom. Pass a custom array to override.
allowCustomRange	opcional	`boolean`	Show a "custom" toggle that reveals a date range picker
onCustomRange	opcional	`(range: DateRange) => void`	Called when a custom date range is confirmed
customLabel	opcional	`string`	Label for the custom range toggle (default: "Custom")
className	opcional	`string`	Extra CSS class on the root wrapper

Ejemplo del paquete

import { PeriodSelector } from "@solu30/ui-kit";
const [period, setPeriod] = useState<string>("month");
const [range, setRange] = useState<DateRange | null>(null);
<PeriodSelector
value={period}
onChange={setPeriod}
onCustomRange={setRange}
/>

Del @example del JSDoc de @solu30/ui-kit, sin editar. Cuatro de los 69 ejemplos del paquete traen pegada la firma cruda del .d.ts —el mismo defecto del extractor que se come las descripciones—, y por eso la caja tiene tope de alto: el ejemplo de verdad suele estar al final.