Skip to content
✨ Learn more about Convo Space & Omnid →
Docs
Convo SDK
React

React Library

Installation & Setup

The React Library is built on,

  • Ethers: A complete and compact library for interacting with the Ethereum Blockchain and its ecosystem.
  • Degen: Design system for Mirror.xyz
  • Convo Space SDK: SDK for building on theconvo.space

Install Dependenices

Setup

Wrap the root of your app in a ThemeProvider, import the external stylesheet. Reference

import { ThemeProvider } from 'degen'
import 'degen/styles'
 
const App = () => {
  return <ThemeProvider>{children}</ThemeProvider>
}

All Done.

ℹ️

To theme the components acording to your website, refer to ThemeProvider

Component Guide

CommentSection

  • query: Defines the Conversation the Comment Section gets anchored to,
    • threadId: This uniquely anchors a conversation to an element. Could be the Unique Id of the Post, Image, NFT etc.
    • url: This sets the source of the Conversations, like https://opensea.io. If setting up for your own website, it should be the hostname of your wesbite.
  • apikey: Defines the API Key the Comment Section uses to query Convo Space. Grab one on the Developer Dashboard if you don't have one.
  • hostname: This sets the source of the Conversations, this should always be your website's hostname.
  • provider: An Ethers Web3Provider is used to Connect to a user's wallet and Sign a Message to Authenticate the user.

Example,

import { CommentSection } from "@theconvospace/react";
 
<CommentSection
    query={{
        threadId: "KIGZUnR4RzXDFheXoOwo",
        url: "https://theconvo.space/",
    }}
    apikey="CSCpPwHnkB3niBJiUjy92YGP6xVkVZbWfK8xriDO"
    hostname="https://theconvo.space/"
    provider={web3}
/>
 

Comment

  • commentId: Unique Id of the Comment.
  • apikey: Defines the API Key the Comment Section uses to query Convo Space. Grab one on the Developer Dashboard if you don't have one.

Example,

import { Comment } from "@theconvospace/react";
 
<Comment
    commentId="01g6w7sg6f5d9p5tcy95m75rr6"
    apikey="CSCpPwHnkB3niBJiUjy92YGP6xVkVZbWfK8xriDO"
/>

CommentEmbed

Sets up an Iframe.

Example,

import { CommentEmbed } from "@theconvospace/react";
 
<CommentEmbed
    config={{ commentId: "01g40c9sx52cp69hqa155wt2yd" }}
    width="500px"
    height="300px"
/>

ConvoEmbed

Sets up an Iframe.

Example,

import { ConvoEmbed } from "@theconvospace/react";
 
<ConvoEmbed embedConfig={{
    threadId: "KIGZUnR4RzXDFheXoOwo",
    url: "https://theconvo.space/",
    theme: "dark",
    width: "700px",
    height: "500px"
}} loading="eager" width="700px" height="550px" />
Last updated on August 11, 2022