react-widgets
- Version 5.8.6
- Published
- 1.43 MB
- 10 dependencies
- MIT license
Install
npm i react-widgetsyarn add react-widgetspnpm add react-widgetsOverview
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: () => void;property handleEntering
handleEntering: () => void;property handleExit
handleExit: () => void;property handleExited
handleExited: () => void;property handleTransitionEnd
handleTransitionEnd: (done: () => void) => void;property nodeRef
nodeRef: React.RefObject<HTMLElement>;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: () => 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[](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 4338 ms. - Missing or incorrect documentation? Open an issue for this package.
