React.js

How to integrate the Split SDK into applications using React.js

Setup

Install the SDK using npm or yarn.

# node
npm install @split-tech/browser-sdk
# yarn
yarn add @split-tech/browser-sdk

Ensure your environment has Node.js version 18.0.0 or higher before installing the SDK.

Example

In your React.js App.tsx file, import and initialize the Split SDK like this.

Using SplitBrowserProvider

// App.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { SplitBrowserProvider, type SplitProviderConfig} from "@split-tech/browser-sdk";
import MainComponent from './MainComponent'; // Example component

const config: SplitProviderConfig = {
  referralParam: "code",
  refetchInterval: 3000
}; 
 
const App = () => {
  return (  
     <SplitBrowserProvider apiKey={YOUR_API_KEY} config={config}>
        <MainComponent />
     </SplitBrowserProvider>
    )
};

ReactDOM.render(<App />, document.getElementById('root'));

Using built-in functions.

// App.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { init, addReferral, type SplitConfig } from "@split-tech/browser-sdk";
import MainComponent from './MainComponent'; // Example component

const config: SplitConfig = {
  referralParam: "code",
};

const App = () => {
  const [address, setAddress] = useState("");
  
  const handleClick = async () => {
     await addReferral(address);
  };
  
  useEffect(() => {
    const handleInit = async () => {
      await init(process.env.SPLIT_API_KEY ?? "", config)
    } 
    
    handleInit()
  }, [])
  
  return (  
      <div> 
         <input name="referee" value={address} onChange={(e) => setAddress(e.target.value)} />
         <button onClick={handleClick}>Connect Wallet</button>
      </div>
    )
};

ReactDOM.render(<App />, document.getElementById('root'));