Tableau React Component

A simple React component to embed Tableau visualizations in your application. This component handles the loading of the Tableau JavaScript API and the embedding of a Tableau Viz within a React component.

Installation

Install my-project with npm

  npm i @veer73/react-tableauviz

or using yarn:

  yarn add @veer73/react-tableauviz

Usage

Here's how you can use the Tableau component in your React application.

Basic Example

import React from 'react';
import Tableau from '@veer73/react-tableauviz';

const App = () => {
  return (
    <div>
      <h1>Tableau Visualization</h1>
      <Tableau
        url="https://public.tableau.com/views/YourViz"
        token="YOUR_ACCESS_TOKEN"
      />
    </div>
  );
};

export default App;

Props

The Tableau component accepts the following props:

• url (string) [required]: The URL of the Tableau visualization that you want to embed.
• token (string) [optional]: A token required to access the Tableau Viz (if necessary).
• options (object) [optional]: Additional options you may want to pass to the Tableau Viz component.

Example with Custom Options

import React from 'react'; import Tableau from 'your-tableau-component';

const App = () => {
  const options = {
    hideTabs: true,
    width: "800px",
    height: "600px"
  };

  return (
    <div>
      <h1>Tableau Visualization with Custom Options</h1>
      <Tableau
        url="https://public.tableau.com/views/YourViz"
        token="YOUR_ACCESS_TOKEN"
        options={options}
      />
    </div>
  );
};

export default App;

Notes

• Toolbar: By default, the Tableau toolbar is hidden. If you need to enable it, you can modify the loadTableau function in the component by setting toolbar to "visible" instead of "hidden".

• Script Loading: The component will automatically load the Tableau API script if it is not already loaded on the page.

Contributing

Contributions are welcome! Please submit a pull request if you have any improvements or bug fixes.

License

This project is licensed under the MIT License.