Composer
Create new conversations or reply to existing ones
Live Demo
When to use
The Composer component renders a message composer to create new threads and to reply to existing ones.
This component pairs well with:
How to use
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)
}
style={{
width: "300px" // Recommended so that the composer doesn't stretch horizontally based on its content
}}
/>
);
};Copy
Properties
threadId
optional
string
An arbitrary string that uniquely identifies a
thread. Messages sent will go to the provided thread ID. If the thread ID doesn't exist yet, it will be created. If no ID is passed, each message sent will create a new thread.
Warning!
An important restriction of working with thread identifiers
is that they must be unique across your entire application.
You can't use the same thread identifier in two separate
organizations. This is an intentional limitation imposed by Cord.
location
optional
string
The location value set for
the newly created threads.
If unset, this will default to the location provided to the
useCordLocation hook if that was used. Otherwise, will default to the current URL for
the page.autofocus
optional
boolean
If
true, the composer input
field will render with the autofocus HTML attribute set.The default value is
false.showExpanded
optional
boolean
If
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.If
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.The default value is
false.showCloseButton
optional
boolean
If
true the composer will show a close button next to the send button that will trigger the onClose callback when clicked.The default value is
false.size
optional
string
enum: ( "small" | "medium" | "large" )
This customizes the size of the composer. You can set it to one of the three following values:
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.
The default setting is
medium.onFocus
optional
function
Callback invoked when a user focuses the composer. The callback is passed an object containing the
threadId linked to the composer.onBlur
optional
function
Callback invoked when the composer loses focus. The callback is passed an object containing the
threadId linked to the composer.onClose
optional
function
Callback invoked when a user clicks on the close
button in the composer. The callback is passed an object containing the
threadId linked to the composer.CSS Variables
These can be used to customize the component. You can learn more about customization here.
Name Default Value
--cord-composer-height-max:40vh;--cord-composer-height-tall:200px;--cord-composer-height-min:var(--cord-line-height-body, var(--cord-space-l, 20px));--cord-composer-border:1px solid var(--cord-color-base-x-strong, #DADCE0);--cord-composer-border--focus:1px solid var(--cord-color-content-primary, #696A6C);--cord-composer-border-radius:var(--cord-border-radius-medium, var(--cord-space-3xs, 4px));
