react-widgets
- Version 5.8.4
- Published
- 1.46 MB
- 10 dependencies
- MIT license
Install
npm i react-widgets
yarn add react-widgets
pnpm add react-widgets
Overview
An à la carte set of polished, extensible, and accessible inputs built for React
Index
Variables
Functions
Classes
Interfaces
Type Aliases
Namespaces
Variables
variable Combobox
const Combobox: Combobox;
--- shortcuts: - { key: alt + down arrow, label: open combobox } - { key: alt + up arrow, label: close combobox } - { key: down arrow, label: move focus to next item } - { key: up arrow, label: move focus to previous item } - { key: home, label: move focus to first item } - { key: end, label: move focus to last item } - { key: enter, label: select focused item } - { key: any key, label: search list for item starting with key } ---
Select an item from the list, or input a custom value. The Combobox can also make suggestions as you type.
Modifiers
@public
variable DatePicker
const DatePicker: React.ForwardRefExoticComponent<any>;
--- subtitle: DatePicker, TimePicker localized: true shortcuts: - { key: alt + down arrow, label: open calendar or time } - { key: alt + up arrow, label: close calendar or time } - { key: down arrow, label: move focus to next item } - { key: up arrow, label: move focus to previous item } - { key: home, label: move focus to first item } - { key: end, label: move focus to last item } - { key: enter, label: select focused item } - { key: any key, label: search list for item starting with key } ---
Calendar
Modifiers
@public
variable DateTimePicker
const DateTimePicker: React.ForwardRefExoticComponent<any>;
--- subtitle: DatePicker, TimePicker localized: true shortcuts: - { key: alt + down arrow, label: open calendar or time } - { key: alt + up arrow, label: close calendar or time } - { key: down arrow, label: move focus to next item } - { key: up arrow, label: move focus to previous item } - { key: home, label: move focus to first item } - { key: end, label: move focus to last item } - { key: enter, label: select focused item } - { key: any key, label: search list for item starting with key } ---
Calendar
Modifiers
@public
variable DropdownList
const DropdownList: DropdownList;
A
<select>
replacement for single value lists.Modifiers
@public
variable Listbox
const Listbox: Listbox;
variable Localization
const Localization: { ({ date, number, messages, children }: ProviderProps): JSX.Element; useLocalizer: ( messages?: Partial<import('./messages').Messages> | undefined, formats?: FormatterOverrides<any, any> | undefined ) => Localizer<unknown, unknown>;};
variable Multiselect
const Multiselect: Multiselect;
--- shortcuts: - { key: left arrow, label: move focus to previous tag } - { key: right arrow, label: move focus to next tag } - { key: delete, deselect focused tag } - { key: backspace, deselect next tag } - { key: alt + up arrow, label: close Multiselect } - { key: down arrow, label: open Multiselect, and move focus to next item } - { key: up arrow, label: move focus to previous item } - { key: home, label: move focus to first item } - { key: end, label: move focus to last item } - { key: enter, label: select focused item } - { key: ctrl + enter, label: create new tag from current searchTerm } - { key: any key, label: search list for item starting with key } ---
A select listbox alternative.
Modifiers
@public
Functions
function Calendar
Calendar: typeof Calendar;
Modifiers
@public
function NumberPicker
NumberPicker: (uncontrolledProps: NumberPickerProps) => JSX.Element;
--- localized: true shortcuts: - { key: down arrow, label: decrement value } - { key: up arrow, label: increment value } - { key: home, label: set value to minimum value, if finite } - { key: end, label: set value to maximum value, if finite } ---
Modifiers
@public
function TimeInput
TimeInput: typeof TimeInput;
Classes
class SlideDownTransition
class SlideDownTransition extends React.Component<SlideDownTransitionProps> {}
property clearContainerHeight
clearContainerHeight: (elem: HTMLElement) => void;
property handleEntered
handleEntered: (elem: HTMLElement) => void;
property handleEntering
handleEntering: () => void;
property handleExit
handleExit: (elem: HTMLElement) => void;
property handleExited
handleExited: (elem: HTMLElement) => void;
property handleTransitionEnd
handleTransitionEnd: (el: HTMLElement, done: () => void) => void;
property propTypes
static propTypes: { in: PropTypes.Validator<boolean>; innerClassName: PropTypes.Requireable<string>; dropUp: PropTypes.Requireable<boolean>; onExit: PropTypes.Requireable<(...args: any[]) => any>; onExited: PropTypes.Requireable<(...args: any[]) => any>; onEntering: PropTypes.Requireable<(...args: any[]) => any>; onEntered: PropTypes.Requireable<(...args: any[]) => any>;};
property setContainerHeight
setContainerHeight: (elem: HTMLElement) => void;
method getHeight
getHeight: (container: HTMLElement) => number;
method render
render: () => JSX.Element;
class SlideTransitionGroup
class SlideTransitionGroup extends React.Component< SlideTransitionGroupProps, SlideTransitionGroupState> {}
constructor
constructor(args: SlideTransitionGroupProps);
property container
container: React.RefObject<HTMLDivElement>;
property current
current: React.ReactElement;
property defaultProps
static defaultProps: { direction: string };
property flush
flush?: boolean;
property handleTransitionEnd
handleTransitionEnd: (hadFocus: boolean | null) => void;
property isTransitioning
isTransitioning?: boolean;
property prev
prev?: any;
property propTypes
static propTypes: { direction: PropTypes.Requireable<string>; onTransitionEnd: PropTypes.Requireable<(...args: any[]) => any>;};
method componentDidUpdate
componentDidUpdate: () => void;
method render
render: () => JSX.Element;
Interfaces
interface Listbox
interface Listbox {}
property displayName
displayName?: string;
property propTypes
propTypes?: any;
call signature
<TDataItem = DataItem>( props: ListboxProps<TDataItem> & React.RefAttributes<ListboxHandle>): React.ReactElement | null;
interface Localizer
interface Localizer<TD = unknown, TN = unknown> {}
property formatOverrides
formatOverrides: FormatterOverrides<TD, TN>;
property messages
messages: ProcessedMessages;
method decimalCharacter
decimalCharacter: () => string;
method firstOfWeek
firstOfWeek: () => number;
method formatDate
formatDate: ( value: Date, formatter: RequiredDateMethods, userFormat?: TD) => string;
method formatNumber
formatNumber: (value: number, userFormat?: TN) => string;
method parseDate
parseDate: (dateString: string, format?: TD) => Date | null;
method parseNumber
parseNumber: (numberString: string, format?: TN) => number | null;
interface Multiselect
interface Multiselect {}
property displayName
displayName?: string;
property propTypes
propTypes?: any;
call signature
<TDataItem = DataItem>( props: MultiselectProps<TDataItem> & React.RefAttributes<MultiselectHandle>): React.ReactElement | null;
interface NumberLocalizer
interface NumberLocalizer<TN> {}
method decimalCharacter
decimalCharacter: () => string;
method format
format: (value: number, format?: TN) => string;
method parse
parse: (numberString: string, format?: TN) => number | null;
interface WidgetHandle
interface WidgetHandle {}
method focus
focus: (opts?: FocusOptions) => void;
Type Aliases
type DataItem
type DataItem = unknown;
type DateFormats
type DateFormats<TFormat> = { [Key in RequiredDateMethods]?: TFormat;};
type DateLocalizer
type DateLocalizer<TD> = { parse(dateString: string, format?: TD): Date | null; firstOfWeek(): number;} & { [Key in RequiredDateMethods]: (date: Date, format?: TD) => string;};
type FormatterOverrides
type FormatterOverrides<TD, TN> = DateFormats<TD> & { number?: TN;};
type RenderProp
type RenderProp<TArg> = (arg: TArg) => React.ReactNode;
type RequiredDateMethods
type RequiredDateMethods = | 'date' | 'time' | 'datetime' | 'header' | 'weekday' | 'dayOfMonth' | 'month' | 'year' | 'decade' | 'century';
type SearchMetadata
type SearchMetadata = { action: 'clear' | 'input'; lastSearchTerm?: string; originalEvent?: React.SyntheticEvent;};
type Value
type Value = unknown;
Namespaces
namespace Calendar
namespace Calendar {}
variable displayName
var displayName: string;
variable propTypes
var propTypes: { disabled: PropTypes.Requireable<boolean>; readOnly: PropTypes.Requireable<boolean>; onChange: PropTypes.Requireable<(...args: any[]) => any>; value: PropTypes.Requireable<Date>; min: PropTypes.Requireable<Date>; max: PropTypes.Requireable<Date>; currentDate: PropTypes.Requireable<Date>; onCurrentDateChange: PropTypes.Requireable<(...args: any[]) => any>; navigatePrevIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>; navigateNextIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>; view(props: any, ...args: any[]): Error | null; views: PropTypes.Requireable<View[]>; onViewChange: PropTypes.Requireable<(...args: any[]) => any>; onNavigate: PropTypes.Requireable<(...args: any[]) => any>; culture: PropTypes.Requireable<string>; autoFocus: PropTypes.Requireable<boolean>; footer: PropTypes.Requireable<boolean>; renderDay: PropTypes.Requireable<(...args: any[]) => any>; formats: PropTypes.Requireable< PropTypes.InferProps<{ header: PropTypes.Requireable<any>; footer: PropTypes.Requireable<any>; day: PropTypes.Requireable<any>; date: PropTypes.Requireable<any>; month: PropTypes.Requireable<any>; year: PropTypes.Requireable<any>; decade: PropTypes.Requireable<any>; century: PropTypes.Requireable<any>; }> >; messages: PropTypes.Requireable< PropTypes.InferProps<{ moveBack: PropTypes.Requireable<string>; moveForward: PropTypes.Requireable<string>; }> >; onKeyDown: PropTypes.Requireable<(...args: any[]) => any>; tabIndex: PropTypes.Requireable<any>;};
variable Transition
var Transition: typeof SlideTransitionGroup;
function move
move: ( date: Date, min: Date, max: Date, view: View, direction: Direction) => Date;
namespace TimeInput
namespace TimeInput {}
variable defaultProps
var defaultProps: { hoursAddon: string; padValues: boolean; precision: string; emptyCharacter: string;};
variable propTypes
var propTypes: { value: PropTypes.Requireable<Date>; onChange: PropTypes.Requireable<(...args: any[]) => any>; datePart: PropTypes.Requireable<Date>; use12HourClock: PropTypes.Requireable<boolean>; padValues: PropTypes.Requireable<boolean>; emptyCharacter: PropTypes.Requireable<string>; noClearButton: PropTypes.Requireable<boolean>; disabled: PropTypes.Requireable<boolean>; readOnly: PropTypes.Requireable<boolean>; precision: PropTypes.Validator<string>; hoursAddon: PropTypes.Requireable<PropTypes.ReactNodeLike>; minutesAddon: PropTypes.Requireable<PropTypes.ReactNodeLike>; secondsAddon: PropTypes.Requireable<PropTypes.ReactNodeLike>; millisecondsAddon: PropTypes.Requireable<PropTypes.ReactNodeLike>;};
Package Files (13)
Dependencies (10)
Dev Dependencies (0)
No dev dependencies.
Peer Dependencies (2)
Badge
To add a badge like this oneto your package's README, use the codes available below.
You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/react-widgets
.
- Markdown[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/react-widgets)
- HTML<a href="https://www.jsdocs.io/package/react-widgets"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 6149 ms. - Missing or incorrect documentation? Open an issue for this package.