Cord LogoDocs
Sign inStart now

Pin

Components /
Ask the Community

Building block for conversations pinned to a place

Live Demo

When to use #

The Pin component is a building block for creating conversations pinned to a particular place on your page. This component lets you create features similar to Floating Threads. Compared to Floating threads thePin component is a lower-level primitive that offers more flexibility in customizability and functionality.

Every Pin corresponds to a single conversation thread like the Thread component. The Pin shows the avatar of the user who created the thread. It also changes color based on whether the conversation contains unread messages.

Most commonly, the Thread component is rendered next to the Pin, opening and closing the Thread when user clicks the Pin. See example below.

This component pairs well with:

How to use #

React:
import { Thread } from "@cord-sdk/react";
export const Example = () => {
  const [open, setOpen] = useState(false);
  return (
    <Pin
      location={{ page: "index" }}
      threadId={"<threadId>"}
      onClick={() => setOpen((x) => !x)}
    >
      <Thread
        location={{ page: "index" }}
        threadId={"<threadId>"}
        style={{ left: '0px', 
                 position: 'absolute', 
                 top: '100%', 
                 visibility: open ? "visible" : "hidden",
              }}
      />
    </Pin>
  );
};
Vanilla JavaScript:
<cord-pin id="pin" thread-id="<threadId>" location='{ "page": "index" }'>
    <cord-thread id="thread" thread-id="<threadId>" location='{ "page": "index" }'></cord-thread>
</cord-pin>

<script>
  const pin = document.getElementById('pin');
  const thread = document.getElementById('thread');
  let open = true;
  pin.addEventListener('cord-pin:click', () => {
    open = !open;
    thread.style.visibility = open ? 'visible' : 'hidden';
  });
</script>
import { Thread } from "@cord-sdk/react";
export const Example = () => {
  const [open, setOpen] = useState(false);
  return (
    <Pin
      location={{ page: "index" }}
      threadId={"<threadId>"}
      onClick={() => setOpen((x) => !x)}
    >
      <Thread
        location={{ page: "index" }}
        threadId={"<threadId>"}
        style={{ left: '0px', 
                 position: 'absolute', 
                 top: '100%', 
                 visibility: open ? "visible" : "hidden",
              }}
      />
    </Pin>
  );
};
Copy

Properties #

threadId #

required
string
This is the id of the conversation thread for which the Pin shows information. For more information about threadId see the documentation for Thread component.

location #

optional
string
The location concept for the Pin component. Just like for Thread, if threadId is for a new thread, this will associate the thread with this location. For existing threads, the location is ignored.
If unset, this field will default to the current URL for the page.

onClick #

optional
function
Callback invoked when user clicks the pin. The argument to this callback will be of type ThreadSummary (or null in the rare case of the event happening before the thread information is loaded).

onResolve #

optional
function
Callback invoked when the thread with id threadId is resolved. The argument to this callback will be of type ThreadSummary (or null in the rare case of the event happening before the thread information is loaded).

onMouseEnter #

optional
function
Callback invoked when user's mouse enters the pin element. The argument to this callback will be of type ThreadSummary (or null in the rare case of the event happening before the thread information is loaded).

onMouseLeave #

optional
function
Callback invoked when user's mouse leaves the pin element. The argument to this callback will be of type ThreadSummary (or null in the rare case of the event happening before the thread information is loaded).

CSS customization #

If you want to customize this component, you can target the classes below in your app's CSS. These are guaranteed to be stable.

This component itself makes use of the Avatar component. Take a look at its documentation for what classes are available to target within it.

Class nameDescription
.cord-pin-container
Applied to the container div. This class is always present.

Not finding the answer you need? Ask our Developer Community

Ask Cordy