React SDK

Index Network UI SDK is a chat UI component specifically designed for interaction within the Index Network.

Super easy to integrate and offers a seamless experience, making it an ideal tool for:

• creators,

• communities,

• DAOs,

• brands,

• researchers, and many more

👉🏻 View Demo

Index features an easy and rich experience

Let's start building! ⛓️

Installation

Get the latest package via npm.

yarn add @indexnetwork/ui

Usage

Place IndexChat tag into your app with your sources, both did and index ids.

This code creates a button that handles all the configuration. Now you can click it to start chatting. No extra work is required. 🎉

import IndexChat from '@indexnetwork/ui';

const App = () => {
  return (
    <div>
      {/* Your components */}
      <IndexChat sources={["index_id"]}  />
    </div>
  );
};

export default App;

Styling

IndexChat component allows you to customize the theme by overriding the defaults for any provided value. Here's an example of how you can set a custom theme:

const customStyle = {
  darkMode: true,
  theme: {
    light: {
      primary: '#0F172A',
      secondary: '#475569',
      accent: '#BED0EC',
      background: '#FFFFFF',
      border: '#E2E8F0',
      pale: '#F8FAFC',
    },
    dark: {
      primary: '#DFEAF4',
      secondary: '#E7EEFF',
      accent: '#1256A2',
      background: '#0F172A',
      border: '#314969',
      pale: '#212C45',
    },
  }
};

const App = () => {
  return (
    <div>
      {/* Your components */}
      <IndexChat sources={["index_id"]}  style={customStyle} />
    </div>
  );
};

Fonts

The package uses Inter as the primary and Freizeit as the secondary font default. If you want to enable them, add the following line to your app.

import '@indexnetwork/ui/dist/assets/style/fonts.css';

Warnings and Compatibility

Before integrating @indexnetwork/ui into your project, please consider the following:

Requirements

• React Version: @indexnetwork/ui uses version 18.2.0. Ensure that your project has a compatible version.

• The jsx option is set to react-jsx, which requires React 17+.

• TypeScript Version: The package is built with TypeScript 5.3.3. Projects using an older version might encounter compatibility issues.

• @indexnetwork/ui is compiled as a UMD (Universal Module Definition) module. Ensure that your module bundler and environment are compatible with UMD modules.

Contributing

Contributions are always welcome! Please read the contributing guidelines to get started.