How can I embed Knowi using React.js?

1 comment

Official comment

Jay June 22, 2023 05:48

Create a file called KnowiChart.js (or something similar -- for this example, it needs to be in the same directory as you main App.js).

Sample Code:

/* global Knowi */

import React, { useEffect } from 'react';

const KnowiChart = () => {

  useEffect(() => {
    const script = document.createElement('script');

    script.src = "https://www.knowi.com/minify/knowi-api.min.js";
    script.async = true;

    document.body.appendChild(script);

    script.onload = () => {
      Knowi.render('#knowi-div', {
        type: 'share',
        dashboard: 'WyobiiGcrraiigipLL7EwYsxAYs5tOBlmtgGeplYnoQ8iswie',
        view: {
          title: true,
          border: true,
          header: true,
          backgroundColor: "lightblue",
          setting: true
        }
      }, function () {
      });
    }

    return () => {
      document.body.removeChild(script);
    }
  }, []);

  const knowiStyle = {
    height: '500px'
  };

  return (
    <div id="knowi-div"i style={knowiStyle}></div>
  )
}

export default KnowiChart;

(Change the embed based on the embed type)

This can be now be referenced from you Main App. Example:

import React from 'react';
import KnowiChart from './KnowiChart';

function App() {
  return (
    <div>
      <h1>My Knowi Chart</h1>
      <KnowiChart />
    </div>
  );
}

export default App;

Please sign in to leave a comment.