Maintains and determines the current state of the active tab.

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

This hook maintains the state of each Columns viewport and returns a list of Columns (breakpoint) CSS class names along with inline CSS style for the gap range defined viewport-wide.

const { className, style } = useColumnsProps( { columns: { widescreen: 4, laptop: 4, tablet: 2, mobile: 1 }, gap: '0px' } );

// className => Array  [ 'sixa-columns-5-widescreen', 'sixa-columns-4-laptop', 'sixa-columns-2-tablet', 'sixa-columns-1-mobile' ]
// style 	=> Object { '--columns-gap': '20px' }

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 );

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

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

// { 'type': 'flex' }

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

const currentPost = useGetCurrentPost( 748, 'page' );

Retrieve media MIME type based on given attachment id.

const backgroundType = useGetMediaType( id );

Generates 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( 'sixa-recent-posts-block/v1/nodes' );

Retrieves a post meta field of the current post.

const { metaValue, postId, postSlug } = useGetPostMeta( 'sixa_blocks_theme_meta' );

Retrieve list of post-type posts and maintain refreshing this list when any of the direct arguments changed.

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

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 );

Retrieve list of product posts and maintain refreshing this list when any of the direct arguments changed.

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

Retrieve list of product taxonomy terms and maintain refreshing this list when any of the direct arguments changed.

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

Retrieves the current site data or object.

const { siteTitle } = useGetSiteData();

Retrieve list of taxonomy terms and maintain refreshing this list when any of the direct arguments changed.

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

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 );

Get latitude & longitude from address.

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

Validate and normalize JSON string to an array.

const options = useNormalizeJsonify( '[\u0022Search Engine\u0022,\u0022Social Media\u0022]' );

// => Array [ 'Search Engine', 'Social Media' ]

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();

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

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

This hook maintains the state of each visibility viewport and returns a list of visibility (breakpoint) CSS class names.

const classNames = useVisibilityClassNames( { laptop: true, tablet: true, mobile: false } );

// => Array [ 'sixa-hide-laptop', 'sixa-hide-tablet' ]