Create new conversations or reply to existing ones
The Composer
component renders a message composer to create new threads and to reply to existing ones.
This component pairs well with:
import { Composer } from "@cord-sdk/react";
export const Example = () => {
return (
<Composer
threadId={"<any string that is unique across your entire application>"}
location={{ page: "index" }}
onFocus={({ threadId }) =>
console.log('Focussed <Composer /> threadId =', threadId)
}
onBlur={({ threadId }) =>
console.log('Blurred <Composer /> threadId =', threadId)
}
onClose={({ threadId }) =>
console.log('Closed <Composer /> threadId =', threadId)
}
onSend={({ threadId, messageId }) =>
console.log('Sent a message from <Composer /> threadId =', threadId, 'messageId=', messageId)
}
style={{
width: "300px" // Recommended so that the composer doesn't stretch horizontally based on its content
}}
/>
);
};
useCordLocation
hook if that was used. Otherwise, will default to the current URL for
the page.true
, the composer input
field will render with the autofocus
HTML attribute set.false
.true
, the composer will always
appear expanded. This means that it will always show the button list (such as
the mention button and emoji button) right below the editor.false
, the composer will start from a single-line state, but will expand
when a user clicks in the editor or starts typing. It will return to a
single-line state when it loses focus and there is no input in the editor.false
.true
the composer will show a close button next to the send button that will trigger the onClose
callback when clicked.false
.small
: The composer will start in a single-line state and expand to show the button list without a separator when a user clicks in the editor or starts typing. It will return to a
single-line state when it loses focus and there is no input in the editor.medium
: The composer will start in a single-line state and expand to show the button list with a separator when a user clicks in the editor or starts typing. It will return to a
single-line state when it loses focus and there is no input in the editor.large
: The composer will start with a size similar to the expanded state but without the button list and expand minimally to show the button list when a user clicks in the editor or starts typing. It will return to the state without the button list when it loses focus and there is no input in the editor.medium
.threadUrl
defaults to window.location.href
. Setting this
property would override that default.threadId
linked to the composer.threadId
linked to the composer.threadId
linked to the composer.threadId
and messageId
linked to the composer.If you want to customize this component, you can target the classes below in your app's CSS. These are guaranteed to be stable.
There are more classes that are best understood in context. We suggest inspecting the component with your browser's developer tools to view everything. You can target any classes starting with cord-
.
.cord-composer
.cord-expanded
.cord-editor-container
.cord-composer-menu
.cord-placeholder
.cord-attachments