# betterdocs/4.9.5/react-src/gutenberg/util/withResButtons/index.js

BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot, version 4.9.5. 71 lines.

- Page: https://pluginprobe.com/plugins/betterdocs/4.9.5/code/react-src/gutenberg/util/withResButtons/index.js
- Raw: https://pluginprobe.com/plugins/betterdocs/4.9.5/raw/react-src/gutenberg/util/withResButtons/index.js
- Modified: 2026-10-12T10:07:14+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/betterdocs/4.9.5/code/react-src/gutenberg/util/withResButtons/index.js#L10-L20`.

```javascript
const { dispatch } = wp.data;

import {
    handleDesktopBtnClick,
    handleMobileBtnClick,
    handleTabBtnClick,
} from "../helpers";

export default function WithResButtons({
    className,
    children,
    resRequiredProps,
    label, // this prop is passed only from background control
}) {
    const { setAttributes, resOption } = resRequiredProps;
    const editorType = window?.betterDocsBlocksHelper?.editorType ?? editorType;

    return (
        <div className={`wrap_res ${className || " "}`}>
            <div className={`${label ? `resBtns` : `resIcons`}`}>
                {/* 'label' prop is used in background-control */}
                {label && (
                    <span style={{ paddingRight: "5px" }} className="resLabel">
                        {label}
                    </span>
                )}
                <span
                    onClick={() =>
                        handleDesktopBtnClick({
                            setAttributes,
                            setPreviewDeviceType:
                                dispatch(editorType)
                                    .__experimentalSetPreviewDeviceType,
                        })
                    }
                    className={`typoResButton dashicons dashicons-desktop ${
                        resOption === "Desktop" ? "active" : " "
                    }`}
                ></span>
                <span
                    onClick={() =>
                        handleTabBtnClick({
                            setAttributes,
                            setPreviewDeviceType:
                                dispatch(editorType)
                                    .__experimentalSetPreviewDeviceType,
                        })
                    }
                    className={`typoResButton dashicons dashicons-tablet ${
                        resOption === "Tablet" ? "active" : " "
                    }`}
                ></span>
                <span
                    onClick={() =>
                        handleMobileBtnClick({
                            setAttributes,
                            setPreviewDeviceType:
                                dispatch(editorType)
                                    .__experimentalSetPreviewDeviceType,
                        })
                    }
                    className={`typoResButton dashicons dashicons-smartphone ${
                        resOption === "Mobile" ? "active" : " "
                    }`}
                ></span>
            </div>
            {children}
        </div>
    );
}

```