WithNotices

withNotices is a React higher-order component used typically in adding the ability to post notice messages within the original component.

Wrapping the original component with withNotices encapsulates the component with the additional props noticeOperations, noticeUI, and noticeList.

noticeOperations
Contains a number of useful functions to add notices to your site.

# createNotice
Function passed down as a prop that adds a new notice.

Parameters

• notice object: Notice to add.

# createErrorNotice
Function passed as a prop that adds a new error notice.

Parameters

• msg string: Error message of the notice.

# removeAllNotices
Function that removes all notices.

# removeNotice
Function that removes notice by ID.

Parameters

• id string: ID of notice to remove.

#noticeUi
The rendered NoticeList.

#noticeList
The array of notice objects to be displayed.

Usage

import { withNotices, Button } from '@wordpress/components';

const MyComponentWithNotices = withNotices(
    ( { noticeOperations, noticeUI } ) => {
        const addError = () =>
            noticeOperations.createErrorNotice( 'Error message' );
        return (
            <div>
                { noticeUI }
                <Button variant="secondary" onClick={ addError }>
                    Add error
                </Button>
            </div>
        );
    }
);