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

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.

Last updated 6 months ago

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> ); };