npm install snaptrade-react
import { useState } from 'react';
import { SnapTradeReact } from 'snaptrade-react';
const ConnectBrokerage = () => {
const [open, setOpen] = useState(false);
const [redirectLink, setRedirectLink] = useState(null);
const connectionProcess = () => {
// call "https://api.snaptrade.com/api/v1/snapTrade/login" to generate a redirect link
const link = getRedirectURI();
// update the state with the generated link
setRedirectLink(link);
// update the "open" state to show the modal
setOpen(true);
};
return (
<div>
{/* your Connect button */}
<button onClick={connectionProcess}>Connect</button>
<SnapTradeReact
loginLink={redirectLink}
isOpen={open}
close={() => setOpen(false)}
/>
</div>
);
};
export default ConnectBrokerage;
SnapTradeReact
requires the following props:
*: optional
Prop | Type | Default value | Description |
---|---|---|---|
loginLink | string |
undefined |
The generated redirect link. (retrieve by calling https://api.snaptrade.com/api/v1/snapTrade/login ) |
isOpen | boolean |
undefined |
Determines to show/hide the modal. |
close | Function |
undefined |
A function to be called when user clicks out of the modal or click the X button. |
closeOnOverlayClick | boolean |
true | Whether to close the modal when the mask (area outside the modal) is clicked. |
onSuccess* | Function |
undefined |
A callback function that is executed upon successful connection to a brokerage. This function returns the authorization ID associated with the new connection. |
onError* | Function |
undefined |
A callback function that is triggered when a user encounters an error while attempting to connect to a brokerage. This function returns an object containing both an error code, status code and a detailed description of the error. |
onExit* | Function |
undefined |
A callback function that is triggered when a user closes the modal or exits the second tab (opened for making an oAuth connection) without successfully connecting to a brokerage. |
contentLabel* | string |
Connect Account via SnapTrade |
Indicating how the content container should be announced to screenreaders. |
style* | overlay: { backgroundColor: string, zIndex: number} |
overlay: { backgroundColor: 'rgba(255, 255, 255, 0.75)', zIndex: 1} |
Change styling for the overlay. |
Licensed under Apache License 2.0.