Sidebar (Deprecated)
Self-contained collaboration mini-application
Cord Sidebar has been deprecated and is no longer being actively developed.
To display a series of comments or threaded conversations on your page, we strongly recommend using Cord Threaded Comments, combined with Cord Notification List for better customizability and a more native feel.
Live Demo
When to use #
The Sidebar component renders the Cord sidebar, positioned fixed on the right side of your website. You can customize its width, and you can use the onOpen and onClose callbacks to adjust your website's CSS so the sidebar doesn't overlap with your content.
Sidebar remains primarily as backwards-compatibility for existing applications. It can also rarely be useful as an instant proof-of-concept before committing to a deeper integration.
This component pairs well with:
How to use #
import { Sidebar } from "@cord-sdk/react";
export const Example = () => (
<Sidebar
groupID="my-group"
showPresence={true}
onOpen={() => {
console.log("sidebar is open");
}}
/>
);Copy
Properties #
The location for the sidebar.
The group whose threads the
component should load, and in which new threads should be written.
Note that the Inbox in the Sidebar still loads threads from all
groups the user is in.
If set to true, the sidebar will be open visible.
If set to false, the sidebar will be hidden.
This value defaults to
true.If set to true, the sidebar will display close button
in its top left corner. If set to false, no close button will
be shown. The
onClose callback will be triggered when
this close button is clicked (see below). You would set this
to false if you wanted your application to have full
control over whether the sidebar is open or closed, and not
the user, for example. You would also set this to false
if you wanted the sidebar to be permanently open.
This value defaults to true.If set to true, the sidebar will display a presence
facepile in its top navigation. This facepile will display durable
presence for the current
location. If set to false, the sidebar
will not display a facepile.
This value defaults to true.If set to true, sidebar will include an
inbox launcher button in
its top navigation. If set to false, no inbox launcher
button will be shown. This value defaults to
true.If set to true, the users viewing the sidebar
will not see themselves in the presence facepile. They will
still be marked as present. If set to false, users viewing the
sidebar will be shown in the presence facepile.
This value defaults to
true.If set to true, when the sidebar is closed, a floating
action button will be displayed in the bottom right corner of the screen
enabling the viewing user to open the sidebar. If set to false, no floating
action button will be shown. If you're setting this value to false, you must
ensure users have the ability to open and close the sidebar from within your
application. Set this value to
false if you use your own sidebar launcher
or if you use Cord's sidebar launcher component.
This value defaults to true.If set to
true, the sidebar will display an "All Activity"
button in the top navigation bar. If set to false, this button will be
hidden.
This value defaults to true.If
true, any annotation pins matching the
Sidebar's location will be
rendered. If the sidebar is displaying annotation pins for
the current location, but you don't want those pins to
appear, setting this value to false will prevent the
sidebar from rendering them. (This does not prevent other
components from rendering their own annotation pins, such as
the floating threads
component.) For any location where there are no annotations,
this property has no effect. This value defaults to
true.Sets the name of any threads created from the
sidebar. The thread name is used in a small number of places
where a short name or header is useful to distinguish the
thread; the default value is nearly always fine. A
newly-created thread will have its title set to this value,
but the title of any existing threads will not be changed.
This value defaults to the current page title (document.title).
Callback invoked when sidebar is opened. The
function will be called passed a single argument, an object
with the following properties:
{
width: <number of pixels the sidebar will occupy>
}An example of how to use this callback:
<Sidebar
onOpen={({ width }) => {
document.body.style.paddingRight = width + 'px';
}}
/>Callback invoked when sidebar is closed
Callback invoked when one of the threads in the
sidebar is opened. The callback is passed a single argument,
the ID of the opened thread.
import { useCallback } from 'react';
import { Sidebar } from '@cord-sdk/react';
const MyPage = () => {
const onThreadOpen = useCallback((threadID) => {
if (threadID.startsWith('cord:')) {
// Cord-created thread IDs all begin with this prefix
return;
}
// This code assumes that you've used threadIDs that match
// key elements in your page, which have `id` attributes
// of the same value. That way, when the thread is opened
// in the Cord sidebar, you can scroll your page to the
// corresponding element.
window.location.hash = threadID;
}, []);
return (
<>
<div>My app's page contents</div>
<Sidebar onThreadOpen={onThreadOpen} />
</>
);
}
Callback invoked when one of the threads in the
sidebar is closed. The callback is passed a single argument,
the ID of the opened thread.
import { useCallback } from 'react';
import { Sidebar } from '@cord-sdk/react';
const MyPage = () => {
// See the codeblock above for more context.
const onThreadClose = useCallback((threadID) => {
if (threadID.startsWith('cord:')) {
// Cord-created thread IDs all begin with this prefix
return;
}
if (window.location.hash === threadID) {
window.location.hash = threadID;
}
}, []);
return (
<>
<div>My app's page contents</div>
<Sidebar onThreadClose={onThreadClose} />
</>
);
}
Next up #
Not finding the answer you need? Ask our Developer Community