The type of contrast ratio compliance to confirm to. The ratios in order are:
An element can be tab focused if it is:
hrefinput element that is not type="hidden"button, textarea, or select elementtabIndex >= 0An element can be noted as "programmatically focusable only" has the above
rules, but the tabIndex will be set to -1.
This can either be a query selector string, a specific HTMLElement, or a function that finds a specific HTMLElement to focus.
The type of focus that should be triggered from a keypress.
A function that will get a string value from each item. The default implementation will:
valueKey on an object is a function).Left:
Right:
Center:
Inner Left:
Inner Right:
A mutable ref object that must be applied to each DOM node within the "focusable"/"searchable" list of elements so that custom focus behavior can be triggered.
the element type of each item within the focusable list.
Returns an ordered list with two items:
The HTMLElement type of the container element that handles the custom keyboard movement.
The HTMLElement type of each item within the container element that can be focusable.
A small accessibility helper to ensure that either aria-label or
aria-labelledby have been provided to a component.
The on outside click handler that can be used to check for additional logic before triggering some action. This will be provided:
The callback that is triggered each time an element's size change has been observered.
An optional configuration for calculating and setting the width of the
element relative to the width of the container. When this value is set to
"auto" (default), the width will be based on content width but still
ensuring it can fit within the viewport. Setting this to "equal" will just
apply the container's width to the fixed element. Finally, setting this to
"min" will set the container's width as the minWidth for the fixed
element so that it is at least the same width as the container.
If this is set to "equal" or "min" and the horizontal anchor is not set
to "center", an error will be thrown.
A helper type that allows an optional ref to also be applied with a props
object even though a ref isn't a real prop.
The radio item value can be a simple string or an object containing a value
attribute.
Since the RadioWidget modifies the props a bit for the radio widget, these
are the HTMLAttributes for the RadioWidget that can be overwritten.
The children render function that will be provided the current grid list size object and should return renderable elements.
Note: The first time this is called, the columns and cellWidth will be
the defaultSize. Once the GridList has been fully mounted in the DOM, it
will begin the sizing calculations and update with the "real" values. This
doesn't cause any problems if you are only rendering client side, but it
might mess up server-side rendering, so it is recommended to update the
defaultSize when server-side rendering if this can be "known" service-side
in your app.
This type allows you to require at least one of the provided keys. This is
super helpful for things like aria-label or aria-labelledby when it's
required for a11y.
A "simple" version of all the positioning options. These are generally used across all of react-md as it'll use the "center" version of the opposite type when creating a fixed position.
This is really the type definition for the Parameters type provided by TS, but created a type alias to help with documentation.
A strongly typed throttled version of a throttleable function.
This is the current mode for how your user is interacting with your app. This will be used to determine which type of state styles should be applied at the time of interacting with an element on your page.
Above:
Below:
Center:
Top:
Bottom:
Note: unlike the dir DOM attribute, the "auto" value is not supported
The AAA contrast ratio for passing WGAC 2.0 color contrast ratios.
This is the css variable that is used store the current margin of each cell.
This is the css variable that is used store the current size of each cell.
This is used with the useScrollLock effect to determine if the styles were
applied by scroll locking or not in the cleanup stage.
The amount of time the user must no longer hover any element attached to the HoverModeProvider to disable the hover mode.
The amount of time the user must not hover any element attached to the same instance of the useHoverMode hook when the using the sticky mode.
The amount of time a user must hover an element before the temporary element becomes visible.
The FocusContainer is a wrapper for a few of the accessibility hooks to
maintain focus within an element.
This CSS Variable allows you to override the number of columns that should be displayed in the grid. This is automatically updated with media queries with the default grid implementation, but is used here to add additional inline-style overrides.
This CSS Variable allows you to override the gutter (grid-gap) between each cell in the grid.
The grid component is generally used for a base layout in your app to provide nice padding and spacing between each item.
Note: This component relies on the AppSizeListener as a parent component to
work and will throw an error if it does not exist as a parent.
The GridList component is a different way to render a list of data where
the number of columns is dynamic and based on the max-width for each cell.
Instead of setting a percentage width to each cell based on the number of
columns, this will dynamically add columns to fill up the remaining space and
have each cell grow up to a set max-width. A really good use-case for this is
displaying a list of images or thumbnails and allowing the user to see a full
screen preview once selected/clicked.
This component is used to determine how the user is current interacting with
your app as well as modifying the document.body's className with the
current mode. This is what allows the rmd-utils-phone-only,
rmd-utils-keyboard-only, and rmd-utils-mouse-only mixins to work.
The contrast ratio that can be used for large text where large text is considered 18pt or 14pt bold.
The contrast ratio that can be used for normal text.
The RadioGroup is a low-level component that does not provide any styles
and instead only provides the accessibility required for a
role="radiogroup" and rendering each role="radio" item.
This component offers no styles and probably shouldn't be used externally
since it is just rendered by the RadioGroup component.
This component should be mounted near the top of your app as it will keep track of the current app size based on the provided breakpoint widths.
A simple component that will render the children only when the app is
considered in desktop mode via the AppSizeContext.
The Dir component is used to handle the current writing direction within
your app as well as conditionally updating the writing direction for small
sections in your app. When this component is used for the first time near the
root of your React component tree, the current direction will be applied to
the root <html> element. Otherwise the current dir will be cloned into the
child element so it can be passed as a prop.
// html element will be updated to have `dir="ltr"`
ReactDOM.render(<Dir><App /></Dir>, root)
// html element will be updated to have `dir="rtl"` while the `<span>` will
// now be `<span dir="ltr">`
ReactDOM.render(
<Dir defaultDir="rtl">
<Some>
<Other>
<Components>
<Dir defaultDir="ltr">
<span>Content</span>
</Dir>
</Components>
</Other>
</Some>
</Dir>,
root
);
Note: Since the dir is cloned into the child element, you need to make sure
that the child is either a DOM element or the dir prop is passed from your
custom component.
This component should normally be mounted near the root of your app to enable hover mode for child components. However, it can also be used at other levels if hover mode functionality should not carry over between two different parts of the screen.
A simple component that will render the children only when the app is
considered in mobile mode via the AppSizeContext. A mobile view will be
true for both phones and tablets.
A simple component that will render the children only when the app is
considered in phone mode via the AppSizeContext.
This is a simple component that will attach a throttled resize event listener when mounted, and detach when it unmounts.
This component only works for entire app resize events. If you are looking
for specific element resize events, check out the ResizeObserver component
instead.
The resize observer is used to track the size changes for a single element in
a page. This is a bit different than a normal ResizeListener since it does
not rely on entire page size changes.
This is a simple component wrapper for the useScrollListener hook.
A simple component that will render the children only when the app is
considered in tablet mode via the AppSizeContext.
This component is used to determine how the user is current interacting with
your app as well as modifying the document.body's className with the
current mode. This is what allows the rmd-utils-phone-only,
rmd-utils-keyboard-only, and rmd-utils-mouse-only mixins to work.
A simple wrapper for the setTouchEvent to just always add events.
The touch event callback function to use.
A small utility function that allows me to apply a passed in ref along with my own custom ref logic.
The DOM Node instance
The prop ref
Applies the BEM styled class name to an element.
The base class to use
a function to call that generates the full class name
Filters a list by ensuring that all items contain the query string in order anywhere in it's own value.
The current query string
The list of searchable items that should be filtered
All the search options to use
A filtered list of all the searchable items based on the query string.
Checks if a container element contains another element as a child while allowing for nulls or a MutableRefObject of HTMLElement or null. Mostly just a convenience function that should be used internally.
The element to use as a container element. This can be an HTMLElement, null, or a MutableRefObject of HTMLElement or null.
The element that might be a child of the container element. This can be an HTMLElement, null, or a MutableRefObject of HTMLElement or null.
True if the container contains the child element and both the container and child are valid HTMLElements (not null).
This util will return the className string only if the RadioItemValue
had a className property.
an optional className to provide to the radio
This util will return the style object only if the RadioItemValue had a
style property.
an optional style object to provide to the radio.
This is normally used for reusable shareable configs that have multiple
shared options with default values that should be used. This basically works
just like defaultProps in react.
The original object that has the optional/omitted values
The required default values that should be used to fill the optional object with
a new object with both the values of the optional and required objects but use the optional values if they were defined.
Creates a delegated event listener using custom events. Most of this code comes from the MDN about resize listeners.
This will return an object for adding or removing event handlers for the
provided eventType since only one base throttled event listener will be
created. Each callback that is added will be called with the event each time
the event is triggered. This does mean that you will manually need to remove
your callback like normal or else it can be called when no longer in use.
This also means that it doesn't "hurt" to call this function without
immediately calling the add function since the event won't start until
there is at least 1 callback.
One of the event types that should be used to create a delegated event for. This should be things like resize, click, scroll, etc.
The target that should have the delegated event handler attached to. This is normally the window, but can be any element as needed.
Boolean if the event should be throttled or not. Normally only event types like resize or scroll should be throttled for performance boosts, but anything can be.
The delegated event handler that allows you to add or remove
EventListeners to that event.
Attempts to disable the scroll locking behavior for an element. If the
element does not have data-rmd-noscroll, it will not be modified. This is
really just a safety catch to ensure that pre-existing styles aren't removed
on accident.
If the data-rmd-noscroll attribute exists, overflow style and the
data-rmd-noscroll attribute will be removed.
Either the <body> tag or an element within the page to
disable scroll locking for.
This will enable scroll locking for the provided element. Scroll locking works by fixing the element within the page and hiding overflow for that element.
Either the <body> tag or an element within the page to
disable scroll for.
The default function used to extract the text from nodes. This will just return the textContent by default unless the node has a react-md FontIcon as a child. If there is a FontIcon child, the node will be cloned without the FontIcon to return the textContent instead. This is because the FontIcon's text content would also be returned from the node's text content.
Either a string or an element element to convert
A string to use for finding font icons in the HTML Element. When this is set to the empty string, the element will not be checked for font icons which might be a slight performance boost if you are guarenteed to not use font icons
This is a simple array.find implementation that will work for any
searchable item type and return the first item that starts with the current
query string ignoring case.
The current query string to use to match with
The list of searchable items
The additional search options available.
the found item in the searchable list or null
Attempts to find the first match index for a list of values that starts with the provided query string and is within the start and end indexes. If no matches are found, -1 will be returned instead.
Since this is normally coming from a keydown event, the query must be a string of all capital letters to work as each value will be converted to uppercase before checking.
The current query string to find within the values
The list of values to search within
The start index for the search
The end index for the search
A function that is used to find the next match index within a list of values by comparing the start values ignoring case.
If a match can not be found from the search string, -1 will be returned.
The search value is self-matchable by default, but it can be omitted by
disabling the isSelfMatchable argument. This will make a self-match return
-1.
The current search value
A list of values to search within
The index within the values list to start the search from
Boolean if the current index can be included in the search
Attempts to find a sizing container based on the provided HTMLElement. By default, the sizing element will just be the provided element unless:
data-sizing-selector attribute that is a valid query
selector for the nested item.NOTE: The data-sizing-selector will be run from the current element instead
of the document.
The element to find a sizing container for.
the sizing container relative to the provided element, or null if
none could be found.
A function that is used to focus an element within the provided node. This can either focus the first, last, or a querySelector found element.
Either an HTMLElement or the document to focus an element within.
Either the "first" or "last" string to focus the first or last focusable element within the container or a query selector string to find a focusable element within the container.
Boolean if programmatically focusable elements should be included as well.
Boolean if the focus event should not scroll the
element into view. This should normally remain false, but can be useful if
the element gets focused while offscreen during a transition.
Optonal child elements to search
Filters a list by using a fuzzy search "algorithm" (huge double quotes on algorithm). The fuzzy search will just ensure that all the letters in the query string appear in-order for all the remaining items. However, the letters do not need to be consecutive.
The current query string
The list of searchable items that should be filtered
All the search options to use
A filtered list of all the searchable items based on the query string.
Gets the HTMLElement or null from a provided RefObject or HTMLElement/null
This util is used to get the "true" element.getBoundingClientRect() that
ensures that transitions using tarnsforms don't mess up the sizing so that
position calculations are easier to do.
The element to get a rect for.
An optional object of coordinates to apply to the positioning styles. This should be used when the coords might resize the element since it needs to try to fit within the viewport.
either a DOMRect or ClientRect for the element
One of the most complicated functions in this project that will attempt to position an element relative to another container element while still being visible within the viewport. Below is the logical flow for attempting to fix the element to the container:
No Container: If there is no container element, return the provided x and y positions and no styles since there's nothing we can use to calculate the position.
No Element: If the container was provided but the element to position does
not exist, return an style object containing the left and top values for
the container and apply as many of the positioning options as possible so
that the styles are "as close as possible" before the fixed element is added
to the DOM. This will also return the provided x and y positions since
nothing could be swapped around yet.
Container and Element: If both the container and fixed element were provided,
apply all the positioning options to the left and top values of the
container based on the sizes of both elements.
Now that the left and top values were applied, check to see if the
element is fully visible within the viewport with the provided positioning
options. If it is fully visible, do nothing else. If it isn't... follow the
next flow:
First, check the horizontal sizes and make sure that the element is still
within the viewport with the provided viewwidth margin. If it isn't, first
try to swap only to a right style instead of left to see if that fixes it,
otherwise keep both the left and right styles.
A simple util that will find all the tab focusable elements within a container element. The container should normally be a specific HTMLElement, but it can also be the entire document if you want to find all focusable elements within your page.
The container element/document to find focusable elements within.
Boolean if programatically focusable elements should be included instead of only tab focusable.
A list of HTMLElements that are focusable within the container.
Creates an "amazing" regular expression that matches the letters in order and escapes any letters that could be part of a regex. This should normally be used in fuzzy filters or determining fuzzy matches.
The query string to convert into a "fuzzy" regular expression
The "fuzzy" regular expression that can be used to determine matches.
An extremely simple function that is used to generate an id for an item
within a list of other items. This is generally used with list of items that
should have custom focus with the aria-activedescendant flow instead of
native focus.
The base id for the container element of all the items.
The index of the item within the list. This number will be incremented by 1 as an id to start from 1 instead of 0.
The default implementation of the getItemValue search option that will attempt to "stringify" any unknown item as a string.
The current item to transform
The key to use that should hold the value if the item is an object
the item as a string
An extremely simple "pollyfill" for the window.screen.orientation just for
the type value that is required for the useOrientation hook.
Gets the current percentage based on the min, max, and current value.
the min value
the max value
the current value to compare against
the percentage that the value is between the min and max
values.
This is a small util that is used to transform a search string with common patterns.
The string to transform
Boolean if the value should be lowercased for case-insensitive searches
Boolean if the leading and trailing whitespace should be trimmed
Boolean if all whitespace should be ignored. This
will take precedence over the trim parameter if set to true.
The transformed search string
This is a simple wrapper to get the view width or view hieght.
Either the "height" or "width" string to get that dimension
the view width or view height.
Checks if there is an acceptable contrast ratio between the background and foreground colors based on the provided compliance level.
The background color to check against
The foreground color to check against
The compliance level to use or a custom number as a ratio.
true if there is enough contrast between the foreground and background colors for the provided compliance level.
Checks if an element is focusable.
The element to check
The focus type to compare against
true if the element is focusable
A small util that is used to increment or decrement a number until it reaches the max value or -1. When that happens, it will loop around to 0 or the max value respectively. This does not work for different increment numbers or any values below 0 for now.
Rounds a number to the nearest step within a min/max range.
The value to round to the nearest step
The min value allowed
The max value allowed
The number of steps in the min/max range
The range allowed for the value that defaults to max - min
the value rounded to the nearest step in the min/max range
Create a new object that does not contain the provided keys.
The object to remove keys from
The keys to remove.
a new object without the specified keys
A simple wrapper for the setTouchEvent to just always remove events.
The element to add the touch event to.
One of the touch types to modify.
The touch event callback function to use.
Attempts to scroll an element into view within another container element if
needed. If either the container or element are null, nothing will happen.
The container element that should be scrolled if the child element is not within view.
The element that should be visible within the container element's scroll area.
A helper function for manually setting touch events on elements when they cannot be directly added with a React event listener. This will attempt to create a passive event if the browser supports passive events so there is better scroll performance.
The touch event callback function to use.
Creates a throttled version of a function so that it'll be called with
trailing and leading calls. Since I always get this confused with debounce,
here's a quick summary of the differences:
So debounce is great for things like auto-save features if you want to save whenever the user stops typing for a few seconds while throttle is good for things like sending an API request when the user is typing so that it isn't sent every keystroke, but every few letters. You could also do debounce here, but it'll feel more "responsive" to the user when throttled.
The function that should be throttled
The number of milliseconds to wait before calling the function again
a throttled version of the function that'll return the last computed value if it was called again during the "wait" period.
This is a small helper that will create a media query block based on the provided width value.
The default behavior when pressing the "Enter" key on a form control
(input, textarea, select) is to submit the form that the form control
is in. This util will try to polyfill this behavior for custom widgets that
use are using a role to act as a form control.
The way this works is:
event.key is the "Enter" key. Do nothing if it is not.event.preventDefault() and event.stopPropagation() to prevent
other unwanted keyboard behavior<form>form.querySelector('[type="submit"]')document.querySelector('[type="submit"][form="{{FORM_ID}}"]')form attribute pointing to the id of the formThe reason the submit button has to be found and clicked is because calling
form.submit() won't actually fire any attached form.onsubmit event
handlers. If you click the submit button though, the form.onsubmit handlers
will be called correctly.
The keyboard event that should attempt to submit the form when the enter key is presssed.
true if the event.key was the "Enter" key so that other
keydown logic can be ignored.
A simple util to convert a unit that is using px, em, or rem to a
number so that calculations can be made on that unit.
The unit to convert to a number
the unit as a number
This hook allows for custom keyboard "focus" movement using the
aria-activedescendant movement pattern. This is generally used when the DOM
focus shouldn't actually change from the container element (like listboxes)
but you still need to indicate that another element is "focused" due to a key
press.
To use this hook, you'll want to update the container element of all the
items to have an aria-activedescendant={activeId} attribute and
onKeyDown={onKeyDown} that are provided by this hook. The
aria-activedescendant will help screen readers known what element is
"focused" since the container element should never really lose focus during
these keyboard movement events. Finally, you'll want to update each item
have an id that is the result of getItem(baseId, index) so that it matches
the aria-activedescendant value and then apply ref={itemRefs[i]}.
Unfortunately, this means that all the child items must either be an
HTMLElement or the ref is forwarded down to the HTMLElement.
The itemRefs must be applied so that a new "focused" item can be
scrolled into view as needed.
The type of each data item within the items list.
The HTMLElement type of the container element that handles the custom keyboard movement.
The HTMLElement type of each item within the container element that can be focusable.
Gets the current app size.
the current AppSize
This hook is used to determine the current application size based on the
provided query sizes. When you want to render your app server side, you will
need to provide a custom defaultSize that implements your logic to
determine the type of device requesting a page. Once the app has been
rendered in the DOM, this hook will attach event listeners to automatically
update the app size when the page is resized.
This will conditionally close the dialog when the escape key is pressed.
The function to call to close the dialog.
Boolean if the escape key functionality should be disabled
An optional keydown event handler to also call.
A keydown event handler
Triggers a callback function when another element in the page is clicked that is outside of the provided element. This is generally used for closing temporary elements when something else within the page has been clicked.
The callback will be provided the current element as well as the click
target if additional logic should be applied before closing.
The type of element
Gets the writing direction context which provides access to the current dir
and a toggleDir function.
This hook can be used to implement simple drag-and-drop behavior for file uploads or special styles while dragging an element over a part of a page.
The DropzoneHanders that can be merged with the default functionality.
This is mostly an enternal hook that allows for an optional ref (normally
from props or hook options) to be merged with a hook's required ref. This
will return a MutableRefObject used for DOM manipulation in a custom hook
followed by a ref callback function that should be passed to the DOM node
that will ensure that both the optional propRef and hook ref are updated.
This hook allows for custom keyboard focus movement using DOM focus behavior by actually focusing each DOM node.
To use this hook, you'll want to update the container element of all the
items to have a correct role applied as well as the onKeyDown event
handler provided by this hook. Then, you'll want to applied a
ref={itemRefs[i]} for each item within the items list so that the DOM nodes
can be focused as needed. Unfortunately, this means that all the child items
must either be an HTMLElement or the ref is forwarded down to the
HTMLElement.
The type of each data item within the items list.
The HTMLElement type of the container element that handles the custom keyboard movement.
The HTMLElement type of each item within the container element that can be focusable.
This hook is used to focus an element once a component has mounted. To help with keyboard click events, it will actually wait for an animation frame before attempting to focus as an enter key might click both elements at the same time.
This hook will first focus the HTMLElement (if it is focusable) and then focus an element based on the defaultFocus prop.
This is either a ref object containing the element to focus or the element itself.
The element to focus within the containing element once it has been mounted. This can either be "first" or "last" to focus the first or last focusable elements or a query selector string to find an element to focus.
Boolean if the focus events should try to prevent the
default scroll-into-view behavior. This is generally recommended to be kept
as false, but can be useful to enable if the component mounts offscreen
during a transition.
Boolean if programatically focusable elements should be included instead of only tab focusable.
Boolean if the focus behavior should be disabled.
The useGridList hook allows you to get all the grid and sizing
functionality of the GridList component without needing to wrap your
children in a <div> element.
Example:
const [gridListProps] = useGridList({
cellMargin: 16,
maxCellSize: 300,
containerPadding: 4,
});
return <div {...gridListProps}>{children}</div>;
Note: You must manually provide the gridSize to the GridListSizeProvider
component that was added in 2.3.0 if you want to use the useGridSize hook.
Example:
const [gridListProps, gridSize] = useGridList()
return (
<GridListSizeProvider value={gridSize}>
<MyComponent {...gridListProps} />
</GridListSizeProvider>
);
Gets the current size of each cell within the GridList component. If this
is used without a parent GridList component, -1 is returned instead.
This hook is used to add the hover mode functionality to any component.
An optional object of options to use. See HoverModeOnlyOptions and HoverModeOptions for more details.
either the HoverModeReturnValue or HoverModeReturnValue
Gets the HoverModeContext which allows you implement hover mode functionality for any component. This is mostly an internal hook since everything you need will be available in the useHoverMode hook.
The HoverModeContext
Simple hook to use an interval with auto setup and teardown. The provided functions will be guaranteed to not change and are memoized.
The callback function to call
The time in milliseconds the timer should delay between executions of the callback function
Boolean if the interval should be started immediately
a list containing a boolean if the interval is running, function to start the interval, and a function to stop the interval.
Example:
const isKeyboard = useIsUserInteractionMode("keyboard");
// do stuff if keyboard only
The UserInteractionMode to check against.
true if the current user interaction mode matches the provided
mode.
This is copy/pasted from react-redux which has some more information about this and how to fix "invalid" warnings while running tests.
This is a low-level hook for providing custom keyboard movement based on key
configurations. This normally shouldn't really be used externally since
you'll most likely want to use the "presets" of useFocusMovement and
useActiveDescendantMovement that implement the main movement types already
for you.
The way this works is that it will general a list of mutable item refs that
should be applied to each DOM node for the corresponding item within the
items list. This list will change and regenerate itself each time the
items array changes so it'll always be in-sync with the DOM nodes. This
means that if you have some items that should not be rendered, they
should not be included within the items list. The main reason these item refs
are required is so that the aria-acativedescendant movement can scroll the
new "focused" element into view if needed while the "true" focus movement can
trigger a ref.current.focus() on the new item as needed.
Finally, this will create a keydown event handler that will merge in the
optionally provided onKeyDown prop and check if the pressed key should
trigger a custom keyboard movement event. If it does, an onChange event
will be fired with the matching data and allows for custom movement with
target.focus() or updating the aria-activedescendant attribute as needed.
The type of each data item within the items list.
The HTMLElement type of the container element that handles the custom keyboard movement.
The HTMLElement type of each item within the container element that can be focusable.
Adds the accessibility functionality to search a list of items as the user
types to trigger aria-activedescendant focus or manual DOM focus events.
A helper hook that is used to create a memoized media query tester for
window.matchMedia.
Note: This is a client side only hook as it requires the window to
attach a resize event listener to.
The media query to use
The default value for if this media query matches. When
this is undefined, it will default to false unless the window is
defined and the checkImmediately param was not set to false. Otherwise,
it will check the media query matches on mount and use that value.
Boolean if the media query checking should be disabled.
Boolean if the media query should be checked immediately on mount. When omittied, it will default to checking when the window is defined.
true if the media query is a match.
A simple hook that only triggers the callback when a component is unmounted. This will make sure that the callback function does not have a stale closure by the time the component unmounts as well.
the function to call when the component unmounts.
This media query is used to determine the current orientation of the app
based on the window.screen.orientation.type. This will always be
"landscape-primary" server side unless a default value is provided.
an optional default value to use. When this is omitted,
it will default to "landscape-primary" unless the window is defined. If
the window is defined, it will immediately check the orientation type on
mount.
the orientation type value.
This hook is used to focus the previous element when a component unmounts. The default behavior is to store the current activeElement within the document when the component mounts and then try to focus it again when the component unmounts. You can also provide your own HTMLElement to focus when unmounting.
During the unmount phase, it will wait for an animation frame before checking if the fallback element still exists within the page. If it doesn't, it will use the fallback query/element/function to attempt to find another element to focus. If the element exists within the page, it will then finally be focused.
The animation frame is unfortunately required for keyboard users as pressing enter key will click the previous element immediately on focus as well.
Boolean if the focus behavior should be disabled.
The fallback query, element, or function to use if the previous element no longer exists in the DOM.
An optional previous element to focus. If this is
omitted, the document.activeElement will be used instead.
This hook allows you to provide anything that should be "cached" and puts it into a ref that'll be updated each render. This is pretty overkill for most places, but it's really nice when you want to create event handlers that shouldn't update if the developer used arrow functions to define callbacks. (A great example is for ref callbacks that shouldn't be triggered each render. But that might just be a programming error instead).
The cacheable thing that gets updated after each render.
a mutable ref object containing the current cache.
This is a simple hook that will attach a throttled resize event listener when mounted, and detach when it unmounts.
This hook only works for entire app resize events. If you are looking for
specific element resize events, check out the ResizeObserver component or
useReiszeObserver hook instead.
This uses the deprecated v1 behavior of providing a target element for the
resize observer. It is recommended to use the newer API that returns a ref
handler instead.
The new resize observer API that returns a refHandler to attach to a DOM
node instead of using the weird target API.
The resize handler to call when the element has changed
height or width. If you notice performance issues or other oddities, it is
recommended to wrap this function in useCallback.
Any additional options to use for the resize observer.
This hook will create a performant scroll listener by enabling passive events if it's supported by the browser and delegating the event as needed.
A hook that is used to dynamically add scroll locking to an element. By
default, this will use the main <body> tag for scroll locking, but a query
selector string or an HTML element can also be used instead.
Boolean if the scroll locking behavior should be enabled
Either a query selector string, HTMLElement, or a function that returns an HTMLElement to apply scroll locking to.
Creates a temporary value that gets reset every xms back to the provided
default value. This is useful when doing keyboard searching or other
interactions.
NOTE: This does not force a re-render when the value changes and instead uses a ref value instead.
the type for the value
The default value to use. Each time the reset timeout is triggered, this value will be set again.
The amount of time before the value is reset back to the default value
Simple hook to use an timeout with auto setup and teardown. The provided functions will be guaranteed to not change and are memoized.
The callback function to call
The time in milliseconds the timer should delay between executions of the callback function
Boolean if the timeout should be started immediately.
a list containing a function to start the timeout, a function to stop the timeout, and a function to restart the timeout.
This hooks provides an easy way to toggle a boolean flag for React components. The main use case for this will be toggling the visibility of something. All the provided actions are guaranteed to never change.
Boolean if the visibility should be enabled first render.
an array containing the toggled state, an enable function, a disable function, a toggle function, and then a manual set toggle function.
Returns the current user interaction mode.
This is a simple hoo that will create a memoized media query string with the provided min anx max values.
a boolean if the current media query is a match.
A simple util that will ensure that a number is within the optional min and max values.
The number to ensure that is within the range
The optional min value
The optional max value
the updated value
Generated using TypeDoc
A simple type that can be used for different components that clone a
classNameinto a child component.