> For the complete documentation index, see [llms.txt](https://docs.cspr.click/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cspr.click/cspr.click-sdk/integration/legacy-csprclick-ui.md).

# Legacy csprclick-ui Package

{% hint style="warning" %}
This integration path is **no longer recommended** for new projects. The preferred way to integrate CSPR.click in React applications is described in [Integration](/cspr.click-sdk/integration.md).

This page is kept for existing applications that already use `@make-software/csprclick-ui` and for developers who need the additional flexibility it provides. The package is still supported and will continue to be maintained.
{% endhint %}

## When to use this approach

The `@make-software/csprclick-ui` package trades some integration simplicity for a higher degree of UI control. Consider it if your project requires:

* **Deep customization of the top bar** — you can add your own items, controls, and menu entries beyond what the standard integration exposes.
* **Tweak the CSPR.click styled-components theme** — most of the time, the default CSPR.click UI theme works well with the client application. Sometimes, though, the developer may want to tweak the top bar styles to match their application's design system.

For most new projects these trade-offs are unnecessary. If you are starting fresh, follow the [recommended integration path](/documentation/getting-started.md) instead.

***

This page guides you through the steps required to integrate the CSPR.click SDK into your existing React web application using the `@make-software/csprclick-ui` package.

## Install CSPR.click packages

Run the following command in a terminal window to install CSPR.click packages:

```bash
npm install --save-dev @make-software/csprclick-ui @make-software/csprclick-core-types
```

If you're using Typescript, the command above also installs type definitions for CSPR.click.

## ClickProvider context provider

First, define the initialization options for the CSPR.click library:

```typescript
import { CONTENT_MODE } from '@make-software/csprclick-core-types';

const clickOptions: CsprClickInitOptions = {
    appName: 'Casper dApp',
    appId: 'csprclick-template',
    contentMode: CONTENT_MODE.IFRAME,
    providers: ['casper-wallet', 'ledger', 'metamask-snap'],
};
```

Next, wrap your main application component with the `<ClickProvider>` context provider:

```tsx
<ClickProvider options={clickOptions}>
  <App />
</ClickProvider>
```

This component will manage the download and initialization of the CSPR.click runtime library.

Read more about the [CsprClickInitOptions ](/cspr.click-sdk/reference/types.md#csprclickinitoptions)type in the SDK reference section.

{% hint style="info" %}
You can use the default `csprclick-template` application identifier while you're working locally on your application. But to upload your new project to a server, you'll need to [get your own application id](https://github.com/make-software/casper-click-websdk/blob/master/docs/overview.md).
{% endhint %}

## Add \<ClickUI> component to your app

All the CSPR.click UI elements are managed from the `<ClickUI>` component. This component must be added to the very beginning of your main UI component and it's responsible for displaying the top bar and all the modal windows and pop-ups needed for connecting with wallets, showing information to the user, etc.

```tsx
const topBarSettings = {
    accountMenuItems: [<ViewAccountOnExplorerMenuItem key='0' />],
}

const App = () => {
    return (
        <!-- ... -->
        <ClickUI topBarSettings={topBarSettings}/>
        <!-- ... -->
    )
}
```

Refer to the [Customizing the top bar ](https://github.com/make-software/casper-click-websdk/blob/master/docs/public/csprclick-sdk/react/customizing-the-top-bar.md)section in this guide for complete reference on how to work with each of the setting elements in the top bar.

{% hint style="info" %}
While we recommend to include the CSPR.click top bar in your application, if you have your own Sign in and session management controls you can opt-out. To do so, do not include the `topBarSettings` prop to `ClickUI` and CSPR.click won't render the top bar.
{% endhint %}

## Add CSPR.click styles

### Option 1: your application uses styled-components

When your application already uses the \<ThemeProvider> component from styled-components library, you just need to add CSPR.click styles to your themes.

Considering as an example that your application has `light` and `dark` themes, you may merge the styles into your theme settings like this:

```typescript
import { CsprClickThemes } from '@make-software/csprclick-ui';

const YourAppThemes = {
	dark: {
		...CsprClickThemes.dark,
		// your styles for dark theme here
	},
	light: {
		...CsprClickThemes.light,
		// your styles for light theme here
	},
};
```

### Option 2: your application doesn't use styled-components

CSPR.click requires the `styled-components` library to work. Add it to your dependencies by running the command:

```
npm install --save styled-components@5.3.9
```

Next, add the theme provider to your application:

```tsx
import { CsprClickThemes } from '@make-software/csprclick-ui';

<ThemeProvider theme={CsprClickThemes.light}>
  <ClickProvider options={clickOptions}>
    <App />
  </ClickProvider>
</ThemeProvider>
```

Currently, you can choose between two themes: `light` and `dark`.

### Handling events

In your application, you'll need to listen and respond to different events emitted by the CSPR.click library. On this page, we're covering the most common. Check the [Events](https://github.com/make-software/casper-click-websdk/blob/master/docs/public/reference/events.md) page for a complete list of events.

The following code snippet shows an example of how to bind your handlers to the CSPR.click events with the React `useEffect()` hook:

```tsx
const clickRef = useClickRef();

useEffect(() => {
  clickRef?.on('csprclick:signed_in', async (evt) => {
    // update your app accordingly
  });
  clickRef?.on('csprclick:signed_out', async (evt) => {
    // update your app accordingly
  });
}, [clickRef?.on]);
```

### Import required fonts

In your main CSS file, import the Inter and Jetbrains mono fonts:

```
@import url('https://fonts.cdnfonts.com/css/inter');

@font-face {
    font-family: 'JetBrains Mono';
    src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Regular.woff2')
        format('woff2'),
      url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Regular.woff')
        format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
```