CSPR.click React components

Quick start

The easiest and fastest way to start using CSPR.click for a React application is to use our template for create-react-app. Check it out here: https://github.com/make-software/cra-template-csprclick-react

Install

If you want to add CSPR.click to an existing application or you can't use the CRA template for any reason, then, follow these instructions.

Add the following packages to your React project:

npm i @make-software/csprclick-react

Add the <ClickProvider> context to your app with the CSPR.click SDK initialization options:

import {ClickProvider} from "@make-software/csprclick-react";

const clickOptions = {
  appName: "CSPR.studio",
  apiKey: 'csprclick-api-key',
  appId: 'csprclick-template',
  contentMode: "iframe",
  providers: ['casper-wallet', 'casper-signer'],
  csprclickHost: 'https://casper-click-static.dev.make.services',
};
...

root.render(
    <React.StrictMode>
        <ClickProvider options={clickOptions}>
            <App/>
        </ClickProvider>
    </React.StrictMode>
);

Now, add the ClickTopBar component to your app. For instance:

import {ClickTopBar} from '@make-software/csprclick-react';

function App() {
    ...
    return (
        <>
            <ClickTopBar/>
            ...
        </>
    )
}

Options

Consider to add one or more of the following settings selectors to your app, if needed.

Find examples of usage in the CRA template project.

Theme selector

If your app supports multiple themes, you can add a theme selector to the CSPR.click bar:

const [themeMode, setThemeMode] = useState<ThemeModeType>(ThemeModeType.dark);

<ClickTopBar
  onThemeSwitch={() => setThemeMode(themeMode === ThemeModeType.light ?
                        ThemeModeType.dark : ThemeModeType.light)}
  themeMode={themeMode}
/>

Network selector

TBC

Language selector

TBC

Currency selector

TBC