open-index/open-npm huggingface dataset:
npm package: @make-software/csprclick-core-client
Description: CSPR.click core client package for web applications
Latest version: 1.11.0

# CSPR.click

The `@make-software/csprclick-core-client` package contains type definitions for using CSPR.click SDK
in web applications. Please see the [Getting Started](https://docs.cspr.click/core-js-sdk/getting-started) guide for more information on how to get started with CSPR.click web SDKs.
npm package: @make-software/csprclick-core-types
Description: Typescript definitions for CSPR.click core packages
Latest version: 2.0.3

# CSPR.click

The `@make-software/csprclick-core-types` package contains type definitions for using CSPR.click SDK
in web applications. Please see the [Getting Started](https://docs.cspr.click/core-js-sdk/getting-started) guide for more information on how to get started with CSPR.click web SDKs.
npm package: @make-software/csprclick-react
Description: ## Quick start
Latest version: 0.7.4
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# 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:

```bash
npm i @make-software/csprclick-react
```

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

```typescript jsx
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:

```typescript jsx
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:

```javascript
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
npm package: @make-software/csprclick-ui
Description: CSPR.click UI package for React applications
Latest version: 2.0.4

# 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

## Integrating CSPR.click

If you want to add CSPR.click to an existing application or you can't use the CRA template for any reason, then check our guide [Integrating the UI SDK into your application](https://docs.cspr.click/ui-sdk/integrating-the-ui-sdk-into-your-application).