How to use @blueprintjs/docs-theme - 9 common examples

value={value}
                />
                {children}
            
        );
    }

    private handleClickEvent = (e: React.SyntheticEvent) => {
        this.inputElement.select();
        document.execCommand("copy");
        this.setState({ hasCopied: true });
        Utils.safeInvoke(this.props.onClick, e);
    };

    // tslint:disable-next-line:member-ordering
    private handleKeyDown = createKeyEventHandler(
        {
            all: this.props.onKeyDown,
            [Keys.SPACE]: this.handleClickEvent,
            [Keys.ENTER]: this.handleClickEvent,
        },
        true,
    );

    private handleMouseLeave = (e: React.SyntheticEvent) => {
        this.setState({ hasCopied: false });
        Utils.safeInvoke(this.props.onMouseLeave, e);
    };
}

// tslint:disable-next-line:no-submodule-imports
import "@blueprintjs/test-commons/polyfill";
import "dom4";

import * as React from "react";
import * as ReactDOM from "react-dom";

import { docsData } from "@blueprintjs/docs-data";
import { createDefaultRenderers, ReactDocsTagRenderer, ReactExampleTagRenderer } from "@blueprintjs/docs-theme";

import { BlueprintDocs } from "./components/blueprintDocs";
import * as ReactDocs from "./tags/reactDocs";
import { reactExamples } from "./tags/reactExamples";

const reactDocs = new ReactDocsTagRenderer(ReactDocs as any);
const reactExample = new ReactExampleTagRenderer(reactExamples);

const tagRenderers = {
    ...createDefaultRenderers(),
    reactDocs: reactDocs.render,
    reactExample: reactExample.render,
};

ReactDOM.render(
    ,
    document.querySelector("#blueprint-documentation"),
);

// tslint:disable-next-line:no-submodule-imports
import "@blueprintjs/test-commons/polyfill";
import "dom4";

import * as React from "react";
import * as ReactDOM from "react-dom";

import { docsData } from "@blueprintjs/docs-data";
import { createDefaultRenderers, ReactDocsTagRenderer, ReactExampleTagRenderer } from "@blueprintjs/docs-theme";

import { BlueprintDocs } from "./components/blueprintDocs";
import * as ReactDocs from "./tags/reactDocs";
import { reactExamples } from "./tags/reactExamples";

const reactDocs = new ReactDocsTagRenderer(ReactDocs as any);
const reactExample = new ReactExampleTagRenderer(reactExamples);

const tagRenderers = {
    ...createDefaultRenderers(),
    reactDocs: reactDocs.render,
    reactExample: reactExample.render,
};

ReactDOM.render(
    ,
    document.querySelector("#blueprint-documentation"),
);

private getModifierChangeHandler(name: keyof PopperModifiers) {
        return handleBooleanChange(enabled => {
            this.setState({
                modifiers: {
                    ...this.state.modifiers,
                    [name]: { ...this.state.modifiers[name], enabled },
                },
            });
        });
    }

private getModifierChangeHandler(name: keyof PopperJS.Modifiers) {
        return handleBooleanChange(enabled => {
            this.setState({
                modifiers: {
                    ...this.state.modifiers,
                    [name]: { ...this.state.modifiers[name], enabled },
                },
            });
        });
    }

label="Show arrow buttons"
                    onChange={this.toggleShowArrowButtons}
                />

private renderPalette(palette: string[], key: number, diverging?: boolean) {
        const colors = this.generateColorPalette(palette, diverging, 5);
        const swatches = colors.map((hex: string, i: number) => (
            <div style="{{">
        ));

        const classes = classNames("docs-color-palette", {
            selected: key === this.state.activePalette,
        });
        const clickHandler = this.handlePaletteChange.bind(this, key);
        const keyDownHandler = createKeyEventHandler(
            {
                [Keys.SPACE]: clickHandler,
                [Keys.ENTER]: clickHandler,
            },
            true,
        );

        return (
            <div tabindex="{0}">
                {swatches}
            </div>
        );
    }
}</div>

function isIconFiltered(query: string, icon: IIcon) {
    return smartSearch(query, icon.displayName, icon.iconName, icon.tags, icon.group);
}