How to use @mapbox/mapbox-gl-supported - 9 common examples

componentDidMount() {
    this.setState({ supported: supported() });
  }
  render() {

render() {
            const {frontMatter} = this.props;
            frontMatter.language = ['JavaScript'];
            frontMatter.contentType = 'example';
            return (
                
                    <div>
                        <div>
                            <div>
                                <h1>{frontMatter.title}</h1>
                                <div>{md(frontMatter.description)}</div>

                                {!supported() &amp;&amp;
                                    <div id="unsupported">
                                        <div>
                                            <div>Mapbox GL unsupported</div>
                                            <div>Mapbox GL requires <a href="http://caniuse.com/webgl">WebGL support</a>. Please check that you are using a supported browser and that WebGL is <a href="http://get.webgl.org/">enabled</a>.</div>
                                        </div>
                                    </div>}
                            </div>

                            {supported() &amp;&amp;
                                </div></div>

<div>
                        <div>
                            <div>
                                <h1>{frontMatter.title}</h1>
                                <div>{md(frontMatter.description)}</div>

                                {!supported() &amp;&amp;
                                    <div id="unsupported">
                                        <div>
                                            <div>Mapbox GL unsupported</div>
                                            <div>Mapbox GL requires <a href="http://caniuse.com/webgl">WebGL support</a>. Please check that you are using a supported browser and that WebGL is <a href="http://get.webgl.org/">enabled</a>.</div>
                                        </div>
                                    </div>}
                            </div>

                            {supported() &amp;&amp;
                                </div></div>

_setupPainter() {
        const attributes = extend({}, isSupported.webGLContextAttributes, {
            failIfMajorPerformanceCaveat: this._failIfMajorPerformanceCaveat,
            preserveDrawingBuffer: this._preserveDrawingBuffer,
            antialias: this._antialias || false
        });

        const gl = this._canvas.getContext('webgl', attributes) ||
            this._canvas.getContext('experimental-webgl', attributes);

        if (!gl) {
            this.fire(new ErrorEvent(new Error('Failed to initialize WebGL')));
            return;
        }

        this.painter = new Painter(gl, this.transform);

        webpSupported.testSupport(gl);

_setupPainter() {
        const attributes = extend({}, isSupported.webGLContextAttributes, {
            failIfMajorPerformanceCaveat: this._failIfMajorPerformanceCaveat,
            preserveDrawingBuffer: this._preserveDrawingBuffer,
            antialias: this._antialias || false
        });

        const gl = this._canvas.getContext('webgl', attributes) ||
            this._canvas.getContext('experimental-webgl', attributes);

        if (!gl) {
            this.fire(new ErrorEvent(new Error('Failed to initialize WebGL')));
            return;
        }

        this.painter = new Painter(gl, this.transform);

        webpSupported.testSupport(gl);