A React button component that launches the Trackstar connect modal.
npm:
npm install @trackstar/react-trackstar-link
yarn:
yarn add @trackstar/react-trackstar-link
The trackstar-link
modal can be triggered using the TrackstarConnectButton
component.
import { TrackstarConnectButton } from '@trackstar/react-trackstar-link';
function App() {
const someCustomerId = "12345";
return (
<TrackstarConnectButton
getLinkToken={async () => {
const response = await fetch('https://my-company.backend.com/link-token',
{
method: 'POST',
}
);
const { linkToken } = await response.json();
return linkToken;
}}
onSuccess={async (authCode) =>
// the endpoint you implemented in step 2.2
await fetch('https://my-company.backend.com/store-token',
{
method: 'POST',
body: JSON.stringify({
customer_id: someCustomerId,
auth_code: authCode,
}),
}
)
}
onClose={() => console.log('closed')}
onLoad={() => console.log('loaded')}
>
Connect your WMS
</TrackstarConnectButton>
);
}
Use optional integrationsWithEndpoints
, integrationAllowList
and integrationBlockList
props to determine the specific integrations to display.
To only show integrations that support the get_returns
and create_return
endpoints use
integrationsWithEndpoints={['get_returns', 'create_return']}
The other two props take in a string array of integration names. To only show ShipBob and Ongoing integrations use
integrationAllowList={['shipbob', 'ongoing']}
To show all integrations except ShipBob and Ongoing use
integrationBlockList={['shipbob', 'ongoing']}
The integrationAllowList
and integrationBlockList
props are mutually exclusive. If both props are given values, all integrations will be displayed.
Integration IDs that can be used in these props can be found in the table here: https://docs.trackstarhq.com/introduction#warehouse-management-systems
Set the sandbox
prop to true
to include a sandbox WMS in the list of integrations. This is useful for testing.
Use the buttonId
prop to use multiple instances of <TrackstarConnectButton
. This is useful to have several buttons with different integrationAllowList
's to display. Each <TrackstarConnectButton
will need its own unique string for buttonId
.
Contact us at support@trackstarhq.com
.