Members

(constant) Dialog :any

Type:
  • any
Source

(constant) DialogContent

DialogContent

Low-level component if you need more control over the styles or rendering of the dialog content.

Note: Must be a child of DialogOverlay.

Note: You only need to use this when you are also styling DialogOverlay, otherwise you can use the high-level Dialog component and pass the props to it. Any props passed to Dialog component (besides isOpen and onDismiss) will be spread onto DialogContent.

Source
See
  • Docs https://reach.tech/dialog#dialogcontent

DialogInner

DialogInner

Source

(constant) DialogOverlay

DialogOverlay

Low-level component if you need more control over the styles or rendering of the dialog overlay.

Note: You must render a DialogContent inside.

Source
See
  • Docs https://reach.tech/dialog#dialogoverlay

(constant) ReactPropTypesSecret$1

Copyright (c) 2013-present, Facebook, Inc.

This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree.

Source

(constant) RemoveScroll

Removes scrollbar from the page and contain the scroll within the Lock

Source

checkStyles

When in dev mode, checks that styles for a given @reach package are loaded.

Source
Example
checkStyles("dialog") will check for styles for @reach/dialog

useCheckStyles

No-op function.

Source

(constant) useIsomorphicLayoutEffect

React currently throws a warning when using useLayoutEffect on the server. To get around it, we can conditionally useEffect on the server (no-op) and useLayoutEffect in the browser. We occasionally need useLayoutEffect to ensure we don't get a render flash for certain operations, but we may also need affected components to render on the server. One example is when setting a component's descendants to retrieve their index values.

Important to note that using this hook as an escape hatch will break the eslint dependency warnings unless you rename the import to useLayoutEffect. Use sparingly only when the effect won't effect the rendered HTML to avoid any server/client mismatch.

If a useLayoutEffect is needed and the result would create a mismatch, it's likely that the component in question shouldn't be rendered on the server at all, so a better approach would be to lazily render those in a parent component after client-side hydration.

TODO: We are calling useLayoutEffect in a couple of places that will likely cause some issues for SSR users, whether the warning shows or not. Audit and fix these.

https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85 https://github.com/reduxjs/react-redux/blob/master/src/utils/useIsomorphicLayoutEffect.js

Source

Methods

Portal()

Portal

Source
See
  • Docs https://reach.tech/portal#portal

assignRef(ref, value)

Assigns a value for a given ref, no matter of the ref format

Parameters:
NameTypeDescription
refRefObject

a callback function or ref object

value

a new value

Source
See
Example
const refObject = useRef();
const refFn = (ref) => {....}

assignRef(refObject, "refValue");
assignRef(refFn, "refValue");

assignRef$1(ref, value)

Passes or assigns an arbitrary value to a ref function or object.

Parameters:
NameTypeDescription
ref
value
Source

forwardRefWithAs()

This is a hack for sure. The thing is, getting a component to intelligently infer props based on a component or JSX string passed into an as prop is kind of a huge pain. Getting it to work and satisfy the constraints of forwardRef seems dang near impossible. To avoid needing to do this awkward type song-and-dance every time we want to forward a ref into a component that accepts an as prop, we abstract all of that mess to this function for the time time being.

Source

getOwnerDocument(element)

Get an element's owner document. Useful when components are used in iframes or other environments like dev tools.

Parameters:
NameTypeDescription
element
Source

isFunction(value)

Checks whether or not a value is a function.

Parameters:
NameTypeDescription
value
Source

isString(value)

Checks whether or not a value is a string.

Parameters:
NameTypeDescription
value
Source

useCallbackRef(initialValue, callback) → {MutableRefObject}

creates a MutableRef with ref change callback

Parameters:
NameTypeDescription
initialValue

initial ref value

callbackfunction

a callback to run when value changes

Source
See
Returns:
Type: 
MutableRefObject
Example
const ref = useCallbackRef(0, (newValue, oldValue) => console.log(oldValue, '->', newValue);
ref.current = 1;
// prints 0 -> 1

useForceUpdate()

Forces a re-render, similar to forceUpdate in class components.

Source

useForkedRef(refs)

Passes or assigns a value to multiple refs (typically a DOM node). Useful for dealing with components that need an explicit ref for DOM calculations but also forwards refs assigned by an app.

Parameters:
NameTypeDescription
refs

Refs to fork

Source

useMergeRefs(refs) → {MutableRefObject}

Merges two or more refs together providing a single interface to set their value

Parameters:
NameTypeDescription
refsRefObject | Ref
Source
See
Returns:
  • a new ref, which translates all changes to {refs}
Type: 
MutableRefObject
Example
const Component = React.forwardRef((props, ref) => {
  const ownRef = useRef();
  const domRef = useMergeRefs([ref, ownRef]); // 👈 merge together
  return <div ref={domRef}>...</div>
}

wrapEvent(theirHandler, ourHandler)

Wraps a lib-defined event handler and a user-defined event handler, returning a single handler that allows a user to prevent lib-defined handlers from firing.

Parameters:
NameTypeDescription
theirHandler

User-supplied event handler

ourHandler

Library-supplied event handler

Source