Implementation for Tableau Embedding Api React component
3.14.x of the React component includes version 3.14.y of the Embedding API (patch
@tableau/embedding-api-react, you do not need to install
@tableau/embedding-api at all.
@tableau/embedding-api-react.
Warning: If your embedded vizzes are in environments where you do not control the deployed version of Tableau, like Tableau Public or Tableau Cloud, it is recommended to import the Embedding API library from the server itself—not installing it from NPM—since the server will always provide the latest compatible version. See Where to get the Embedding API v3 library.
@tableau/embedding-api-react library.
cmd
npm install @tableau/embedding-api-react@~3.14.0
`
4. In your React application, import TableauViz and Api from 'embedding-api-react'. Api is a re-export of the
Embedding API from @tableau/embedding-api in its entirety.
5. Here is an example to embed a basic viz:
`tsx
import { Api, TableauViz } from 'embedding-api-react';
function MyComponent() {
return (
src="https://my-server/views/my-workbook/my-view"
toolbar="hidden"
onFirstInteractive={async (event) => {
const { target: viz } = event;
const dashboard = viz.workbook.activeSheet as Api.Dashboard;
const filters = await dashboard.getFiltersAsync();
console.log('filters', filters);
}}
/>
);
}
``