Maintains and determines the current state of the active tab.

const [ activeTab, setActiveTab ] = useActiveTab( initialTabName, tabs );

Conditionally return an instance of useRef.

const anchorRef = useConditionalRef( isSave );

This hook mimicks the componentDidMount hook for React.

useDidMount( () => {
    console.log( 'Mounted!' );
} );

This hook mimicks the componentDidUpdate hook for React. Fires a callback on component update, and can take in a list of conditions to fire callback when one of the conditions changes.

useDidUpdate( () => {
    console.log( 'Updated!' );
}, [ var1, var2 ] );

Finds the selected post object based on the given post id and maintains the state of change when it happens.

const post = useFindPostById( postId, postsQuery );

Retrieves the author of the current post.

const { authorId, authorEmail } = useGetAuthorData();

Retrieves the block support value for the "Layout" settings to be used in the preview.

const { default } = useGetBlockLayout( 'core/social-links' );

// { 'type': 'flex' }

Returns an object containing the given registered block meta-data.

const currentBlock = useGetBlockType( '74b85937-4f07-8cafb54f16d4' );

Returns an object containing block variations info. The returned object also determines which variation is currently active, and when there are multiple variations annotated as the default one, the last added item is picked.

const { defaultVariation, variations } = useGetBlockVariations( '74b85937-4f07-8cafb54f16d4' );

Returns the post currently being edited in its last known saved state, not including unsaved edits. Returns an object containing relevant default post values if the post has not yet been saved.

const { postId, postTitle } = useGetCurrentPost();

Returns an object containing relevant editor settings.

const { colors, fontSizes } = useGetEditorSettings();

Retrieve media MIME type based on given attachment id.

const backgroundType = useGetMediaType( id );

This hook allows for generating custom (notification) toast messages.

const toast = useToast();
toast( 'Text to display as a toast message!' );

Retrieve list of HTML nodes genearted for each post item.

const nodeList = useGetNodeList( 'namespace-recent-posts/v1/nodes' );

Retrieves the current post object given the post ID and post-type.

const post = useGetPost( 748, 'page' );

Retrieves a post meta field of the current post.

const { metaValue, postId, postType } = useGetPostMeta( 'meta_key' );

Retrieve a list of post-type posts and refresh the list when any direct arguments change.

const { postsOptions, postsQuery } = useGetPosts( { order: 'asc' }, clientId, 'posts' );

Retrieve a list of product posts and refresh the list when any direct arguments change.

const { productsOptions, productsQuery } = useGetProducts( { order: 'asc' }, clientId );

Retrieve a list of product taxonomy terms and refresh the list when any direct arguments change.

const { termsOptions, termsQuery } = useGetProductTerms( 'categories' );

Retrieves the current site data or object.

const { siteTitle } = useGetSiteData();

Retrieve a list of taxonomy terms and refresh the list when any direct arguments change.

const { termsOptions, termsQuery } = useGetTerms( 'categories' );

Determines whether a block has already inner blocks inserted.

const hasInnerBlocks = useHasInnerBlocks( '74b85937-4f07-8cafb54f16d4' );

Detect whether the mouse is hovering an element.

const [ hoverRef, isHovered ] = useHover();

return <div ref={hoverRef}>{ isHovered ? "😁" : "☹️" }</div>;

This module merely adds backward compatibility for the usage of experimental useInnerBlocksProps in projects created using WordPress versions prior to 5.9.

const blockProps = useBlockProps( { className: 'my-class' } );
const innerBlocksProps = useInnerBlocksProps(
    blockProps,
    { allowedBlocks: [ 'core/heading', 'core/paragraph', 'core/image' ] }
);

This hook takes an initial value for an input field and updates it when the onChange event raises.

const [ value, setValue ] = useInputValue( 'Hello' );
<TextControl onChange={ setValue } value={ value } />

This hook determines whether an element is being dragged within another (ref) target element.

const listItemRef = useRef( null );
const isDraggingWithin = useIsDraggingWithin( listItemRef );

Determines whether the block corresponding to the specified client-ID is currently selected with consideration to multi-selection within its parent block.

const isParentSelected = useIsParentSelected( clientId );

Generates latitude & longitude from a given address.

const latLng = useLatLngBounds( 'Skyland Istanbul, Sarıyer, Turkey', 'H7ZH7p3dHa24...', 'en );

This hook maintains the state of post-type name and REST-API base key extraction from the given string value.

const { postTypeKey, restBaseKey } = usePostTypeNameRestBase( 'post|posts' );

Determines whether the current WordPress query has posts to loop over, and slices the query according to the maximum limit determined.

const { havePosts, maxLimit, slicedQuery } = usePreparePosts( [2], 3, [ { id: 1, title: 'Post A' }, { id: 2, title: 'Post B' } ] );

A setTimeout hook that calls a callback after a timeout duration.

const [ isBusy, toggleIsBusy ] = useToggle( true );
const { start } = useTimeout( toggleIsBusy, 2000 );
start();

This hook takes a parameter with value and allows for quickly toggling the value.

const [ value1, toggleValue1 ] = useToggle();
const [ value2, toggleValue2 ] = useToggle( true );
const [ value3, toggleValue3 ] = useToggle( 'start', customToggleFunction );

Updates a post meta field based on the given post ID.

const setMeta = useUpdatePostMeta( 'prefix_theme_meta', { title: false }, 8, 'post' );

Get the current size of the browser window.

const size = useWindowSize();