TypeScript icon, indicating that this package has built-in type declarations

3.1.1 • Public • Published



A React modal component for SnapTrade connection portal.

NPM Version NPM Downloads npm-bundle-size license-badge

📖 Table of Contents

🚀 Getting Started

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 "" to  generate a redirect link
    const link = getRedirectURI();

    // update the state with the generated link

    // update the "open" state to show the modal
  return (
      {/* your Connect button */}
      <button onClick={connectionProcess}>Connect</button>

        close={() => setOpen(false)}

export default ConnectBrokerage;

⚙️ Configuration

SnapTradeReact requires the following props:

*: optional

Prop Type Default value Description
loginLink string undefined The generated redirect link. (retrieve by calling
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.

👨🏼‍⚖️ License & copyrights

Licensed under Apache License 2.0.

Package Sidebar


npm i snaptrade-react

Weekly Downloads






Unpacked Size

49.4 kB

Total Files


Last publish


  • snaptrade
  • shayanabd