# Customize Widgets

Namespace: `core/customize-widgets`.

## Selectors

### isInserterOpened

Returns true if the inserter is opened.

*Usage*

``` js
import { store as customizeWidgetsStore } from '@wordpress/customize-widgets';
import { __ } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';

const ExampleComponent = () => {
    const { isInserterOpened } = useSelect(
        ( select ) => select( customizeWidgetsStore ),
        []
    );

    return isInserterOpened()
        ? __( 'Inserter is open' )
        : __( 'Inserter is closed.' );
};
```

*Parameters*

- *state* `Object`: Global application state.

*Returns*

- `boolean`: Whether the inserter is opened.

## Actions

### setIsInserterOpened

Returns an action object used to open/close the inserter.

*Usage*

``` js
import { useState } from 'react';
import { store as customizeWidgetsStore } from '@wordpress/customize-widgets';
import { __ } from '@wordpress/i18n';
import { useDispatch } from '@wordpress/data';
import { Button } from '@wordpress/components';

const ExampleComponent = () => {
    const { setIsInserterOpened } = useDispatch( customizeWidgetsStore );
    const [ isOpen, setIsOpen ] = useState( false );

    return (
        <Button
            onClick={ () => {
                setIsInserterOpened( ! isOpen );
                setIsOpen( ! isOpen );
            } }
        >
            { __( 'Open/close inserter' ) }
        </Button>
    );
};
```

*Parameters*

- *value* `boolean|Object`: Whether the inserter should be opened (true) or closed (false). To specify an insertion point, use an object.
- *value.rootClientId* `string`: The root client ID to insert at.
- *value.insertionIndex* `number`: The index to insert at.

*Returns*

- `Object`: Action object.