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