diff --git a/packages/react-events/docs/ContextMenu.md b/packages/react-events/docs/ContextMenu.md new file mode 100644 index 0000000000000..33b95c452be33 --- /dev/null +++ b/packages/react-events/docs/ContextMenu.md @@ -0,0 +1,54 @@ +# ContextMenu + +The `useContextMenu` hooks responds to context-menu events. + +```js +// Example +const Button = (props) => { + const contextmenu = useContextMenu({ + disabled, + onContextMenu, + preventDefault + }); + + return ( +
+ {props.children} +
+ ); +}; +``` + +## Types + +```js +type ContextMenuEvent = { + altKey: boolean, + buttons: 0 | 1 | 2, + ctrlKey: boolean, + metaKey: boolean, + pageX: number, + pageY: number, + pointerType: PointerType, + shiftKey: boolean, + target: Element, + timeStamp: number, + type: 'contextmenu', + x: number, + y: number, +} +``` + +## Props + +### disabled: boolean = false + +Disables the responder. + +### onContextMenu: (e: ContextMenuEvent) => void + +Called when the user performs a gesture to display a context menu. + +### preventDefault: boolean = true + +Prevents the native behavior (i.e., context menu). diff --git a/packages/react-events/docs/Focus.md b/packages/react-events/docs/Focus.md index 1fef78e370ff4..47afc87240036 100644 --- a/packages/react-events/docs/Focus.md +++ b/packages/react-events/docs/Focus.md @@ -1,29 +1,29 @@ # Focus -The `Focus` module responds to focus and blur events on its child. Focus events +The `useFocus` hook responds to focus and blur events on its child. Focus events are dispatched for all input types, with the exception of `onFocusVisibleChange` which is only dispatched when focusing with a keyboard. -Focus events do not propagate between `Focus` event responders. +Focus events do not propagate between `useFocus` event responders. ```js // Example const Button = (props) => { - const [ focusVisible, setFocusVisible ] = useState(false); + const [ isFocusVisible, setFocusVisible ] = useState(false); + const focus = useFocus({ + onBlur={props.onBlur} + onFocus={props.onFocus} + onFocusVisibleChange={setFocusVisible} + }); return ( - -