Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@make-software/csprclick-react

Package Overview
Dependencies
Maintainers
4
Versions
8
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@make-software/csprclick-react

## Quick start

  • 0.7.4
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
2
decreased by-33.33%
Maintainers
4
Weekly downloads
 
Created
Source

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

FAQs

Package last updated on 09 Oct 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc