Composer

The Composer component renders a message composer to create new threads and to reply to existing ones. The Composer is a complex component that can take a lot of props. To speed up development, we provide different components and hooks that allow you to customize the behavior to fit your needs, without having to worry about all of the Composer props.

There are two different components you can use:

• SendComposer is used to send a new message to an existing thread. It can also be used to create a new thread.
• EditComposer is used when you already have a message and would like to edit it.

Send messages and create threads #

You can use SendComposer whenever you want to create a new thread or when you have a thread to which you want to add replies.

How to use #

import { betaV2 } from "@cord-sdk/react";
  
function ExampleComposer(channel) {
    const createThreadOptions = useMemo(() => {
        return {
            name: channel.name,
            location: { channel: channel.id },
            url: "https://www.myawesomeweb.com/" + channel.id,
            groupID: channel.org,
        };
    }, [channel.name, channel.id, channel.org]);

    return <betaV2.SendComposer
        createThread={createThreadOptions}
    />;
}

import { betaV2 } from "@cord-sdk/react";
  
function ExampleComposer(channel) {
    const createThreadOptions = useMemo(() => {
        return {
            name: channel.name,
            location: { channel: channel.id },
            url: "https://www.myawesomeweb.com/" + channel.id,
            groupID: channel.org,
        };
    }, [channel.name, channel.id, channel.org]);

    return <betaV2.SendComposer
        createThread={createThreadOptions}
    />;
}

View Source Code

Properties #

Editing messages #

You can use EditComposer whenever you want to edit an existing message.

How to use #

import { betaV2, thread } from "@cord-sdk/react";
  
function ExampleComposer(messageID) {
    const message = thread.useMessage(messageID);

    return <betaV2.EditComposer
        threadId={message.threadId}
        messageId={messageID}
    />;
}

import { betaV2, thread } from "@cord-sdk/react";
  
function ExampleComposer(messageID) {
    const message = thread.useMessage(messageID);

    return <betaV2.EditComposer
        threadId={message.threadId}
        messageId={messageID}
    />;
}

View Source Code

Properties #