@2e32/react-year-view

Русский (ru)

YearView is a React component for selecting a year.

Installation

npm

npm i @2e32/react-year-view

yarn

yarn add @2e32/react-year-view

Usage

App.tsx

// Once (css import)
import '@2e32/react-year-view/css';

import Page from './Page';

const App = () => <Page />;

export default App;

Page.tsx

import { useState } from 'react';
// Import the component
import YearView from '@2e32/react-year-view';

const Page = () => {
  const [value, setValue] = useState<number>();

  return <YearView value={value} onChange={setValue} />;
};

export default Page;

Props

Name	Type	Default	Description
value	number		Selected year.
options	number[]		Custom list of years. If not set, a decade is generated around value or current year.
optionsPerRow	number	3	Years per row.
className	string		CSS class for the root container.
style	React.CSSProperties		Inline styles for the root container.
rowClassName	string		CSS class for each row container.
disabled	boolean	false	Disables all options.
block	boolean	false	Expands component to 100% of available width.
showCurrent	boolean	false	Highlights the current year.
reverse	boolean	false	Reverses the order of years.
allowDeselect	boolean	false	Allows deselecting the currently selected year.
optionDisabled	(year: number) => boolean		Disables a specific year.
renderOption	function		Custom render for year option. (props: YearViewRenderOptionProps) => React.ReactNode
onSelect	function		Called when a new year is selected. (year: number) => void
onDeselect	function		Called when the current year is deselected (if allowDeselect is enabled). (year: number) => void
onChange	function		Called when selection changes. (year: number) => void (year: number | undefined) => void when allowDeselect is true.

Examples

See storybook.

License

MIT