Index-chat NPM

IndexChat

IndexChat 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

Let's start building! ⛓️

Features

Easy to integrate with any React application
Real-time chat capabilities powered by modern practices
Responsive design and built-in dark mode
Fully customizable themes

Installation

Get the latest package via npm.

npm install index-chat

Usage

Place IndexChat tag into your app with your index_id.

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 'index-chat';

const App = () => {
  return (
    <div>
      {/* Your components */}
      <IndexChat id='index_id'  />
    </div>
  );
};

export default App;

Styling

IndexChat 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 id='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 'index-chat/dist/assets/style/fonts.css';

Warnings and Compatibility

Before integrating index-chat into your project, please consider the following:

Requirements

React Version: index-chat 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.
index-chat is compiled as a UMD (Universal Module Definition) module. Ensure that your module bundler and environment are compatible with UMD modules.