React

This is a simple react component wrapper for the JS loader

React Component

Class Component

import React from 'react';

class DatablocksWidget extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            elementId: `widget-${props.widget}-${Date.now().toString()}`,
            className: props.className
        }
    }

    inject = (wid) => {

        const DB_URL = "https://widget.datablocks.se/api/rose";

        if(!window._MF) {
            let b = document.createElement('script');
            b.type = 'text/javascript';
            b.async = true;
            b.src = `${DB_URL}/assets/js/loader-v4.js`;
            document.getElementsByTagName('body')[0].appendChild(b);
        }

        window._MF = window._MF || {
            data: [],
            url: DB_URL,
            ready: !!0,
            render: () => window._MF.ready = !0,
            push: function(conf) {
                this.data.push(conf);
            }
        }

        window._MF.push(wid);
    }

    render() {
        const {
            elementId,
            className
        } = this.state;

        this.inject({
            query: '#' + elementId,
            ...this.props
        });

        return <div id={ elementId } className={ className } />;
    }
}

export default DatablocksWidget;

Functional component

import React from 'react';

const DatablocksWidgetFunctional = (props) => {

    const {
        widget,
        className
    } = props;

    const query = `widget-${widget}-${Date.now().toString()}`;

    const inject = (wid) => {

        const DB_URL = "https://widget.datablocks.se/api/rose";

        if(!window._MF) {
            let b = document.createElement('script');
            b.type = 'text/javascript';
            b.async = true;
            b.src = `${DB_URL}/assets/js/loader-v4.js`;
            document.getElementsByTagName('body')[0].appendChild(b);
        }

        window._MF = window._MF || {
            data: [],
            url: DB_URL,
            ready: !!0,
            render: () => window._MF.ready = !0,
            push: function(conf) {
                this.data.push(conf);
            }
        }

        window._MF.push(wid);
    }

    useEffect(() => {
        inject({
          query: "#" + query,
          ...props
        });
    }, []);

    return <div id={ query } className={ className } />;
}

export default DatablocksWidgetFunctional;

Usage

{/* For live usage */}
<DatablocksWidget
		className="myCompanysStyle"
		widget="stock-chart"
		locale="sv"
		token="<YOUR TOKEN GOES HERE>"
/>

{/* To force demo data in a widget, you can apply the demo="true" as attribute. */}
{/* This will override the flag set by Modular finance so do not use it in production */}