+
+
+
+
diff --git a/examples/vanilla-avatar-stack/package.json b/examples/vanilla-avatar-stack/package.json
new file mode 100644
index 0000000..cb0bfc7
--- /dev/null
+++ b/examples/vanilla-avatar-stack/package.json
@@ -0,0 +1,25 @@
+{
+ "name": "vanilla-live-cursors",
+ "private": true,
+ "version": "0.0.0",
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "tsc && vite build",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "@ably/spaces": "0.2.0",
+ "ably": "1.2.45",
+ "classnames": "^2.3.2",
+ "nanoid": "^5.0.1",
+ "random-words": "^2.0.0",
+ "react": "^18.0.0",
+ "react-dom": "^18.0.0"
+ },
+ "devDependencies": {
+ "dotenv": "16.4.5",
+ "typescript": "^5.2.2",
+ "vite": "^5.2.13"
+ }
+}
diff --git a/examples/vanilla-avatar-stack/script.js b/examples/vanilla-avatar-stack/script.js
new file mode 100644
index 0000000..14ed0ad
--- /dev/null
+++ b/examples/vanilla-avatar-stack/script.js
@@ -0,0 +1,241 @@
+import Spaces from '@ably/spaces'
+import { Realtime } from 'ably'
+import { nanoid } from 'nanoid'
+import classNames from "classnames";
+
+const MAX_USERS_BEFORE_LIST = 4;
+const HORIZONTAL_SPACING_OFFSET = 40;
+const OVERLAP_AMOUNT = 40;
+const AVATAR_WIDTH = 48;
+
+const client = new Realtime.Promise({
+ clientId: nanoid(),
+ key: import.meta.env.VITE_ABLY_KEY,
+})
+
+const spaces = new Spaces(client)
+const space = await spaces.get('avatar-stack')
+const avatarStack = document.getElementById('avatar-stack')
+
+function calculateRightOffset(options) {
+ const { usersCount, index = 0 } = options;
+
+ return usersCount > MAX_USERS_BEFORE_LIST
+ ? (index + 1) * HORIZONTAL_SPACING_OFFSET
+ : index * HORIZONTAL_SPACING_OFFSET;
+}
+
+function calculateTotalWidth(users) {
+ return (
+ AVATAR_WIDTH +
+ OVERLAP_AMOUNT * Math.min(users.length, MAX_USERS_BEFORE_LIST + 1)
+ );
+}
+
+const mockNames = ["Anum Reeve", "Tiernan Stubbs", "Hakim Hernandez"]
+const mockColors = ["#9951F5", "#1BF5C3", "#F54A4A"]
+
+await space.enter({
+ name: mockNames[Math.floor(Math.random() * mockNames.length)],
+ memberColor: mockColors[Math.floor(Math.random() * mockColors.length)],
+}).then(async () => {
+ const otherMembers = await space.members.getOthers();
+
+ await getMyAvatar()
+ getOtherAvatars(otherMembers.slice(0, MAX_USERS_BEFORE_LIST).reverse())
+}).catch((err) => {
+ console.error('Error joining space:', err);
+})
+
+// Subscribe to member enters in a space
+space.members.subscribe('enter', (member) => {
+ addAvatar(member, otherMembers.length)
+})
+
+// Subscribe to member leaves in a space
+space.members.subscribe(['leave', 'remove'], (member) => {
+ const avatarElement = avatarStack.querySelector(
+ `.avatar[data-member-id="${member.clientId}"]`
+ )
+ if (avatarElement) {
+ avatarElement.remove()
+ }
+})
+
+async function getMyAvatar() {
+ const self = await space.members.getSelf()
+ const initialsCSS = classNames(
+ {
+ ["textWhite"]: self.isConnected,
+ ["inactiveColor"]: !self.isConnected,
+ },
+ "nameOthers",
+ );
+ const statusIndicatorCSS = classNames(
+ {
+ ["statusIndicatorOnline"]: self.isConnected,
+ ["inactiveBackground"]: !self.isConnected,
+ },
+ "statusIndicator",
+ );
+
+ const avatars = document.getElementById('avatars')
+ const avatar = document.createElement('div')
+ avatar.className = 'avatar'
+ avatar.style.backgroundColor = self.isConnected
+ ? self.profileData.memberColor
+ : "#C6CED9"
+ avatar.setAttribute('data-member-id', self.clientId);
+
+ const popup = document.createElement('div');
+ popup.className = 'popup';
+ popup.style.display = 'none';
+
+ const userInfo = createUserInfo(self)
+ popup.appendChild(userInfo);
+
+ avatar.appendChild(popup);
+
+ avatar.addEventListener('mouseover', function() {
+ popup.style.display = 'block'
+ });
+
+ avatar.addEventListener('mouseleave', function() {
+ popup.style.display = 'none'
+ });
+
+ const initials = document.createElement('p')
+ initials.className = initialsCSS
+ initials.textContent = 'You'
+
+ const statusIndicator = document.createElement('div')
+ statusIndicator.className = statusIndicatorCSS
+ statusIndicator.id = 'status-indicator'
+
+ avatars.appendChild(avatar)
+ avatar.appendChild(initials)
+ avatar.appendChild(statusIndicator)
+}
+
+async function addAvatar(user, usersCount, index = 0) {
+ const rightOffset = calculateRightOffset({ usersCount, index });
+ const userInitials = user.profileData.name
+ .split(" ")
+ .map((word) => word.charAt(0))
+ .join("");
+
+ const initialsCSS = classNames(
+ {
+ ["textWhite"]: user.isConnected,
+ ["inactiveColor"]: !user.isConnected,
+ },
+ "nameOthers",
+ );
+
+ const statusIndicatorCSS = classNames(
+ {
+ ["statusIndicatorOnline"]: user.isConnected,
+ ["inactiveBackground"]: !user.isConnected,
+ },
+ "statusIndicator",
+ );
+
+ const avatarsElement = document.getElementById('avatars')
+ avatarsElement.style.right = rightOffset
+ avatarsElement.style.zIndex = usersCount - index
+
+ const avatar = document.createElement('div')
+ avatar.className = 'avatar'
+ avatar.style.backgroundColor = user.isConnected
+ ? user.profileData.memberColor
+ : "#C6CED9";
+ avatar.setAttribute('data-member-id', user.clientId);
+
+ const popup = document.createElement('div');
+ popup.className = 'popup';
+ popup.style.display = 'none';
+
+ const userInfo = createUserInfo(user)
+ popup.appendChild(userInfo);
+
+ avatar.appendChild(popup);
+
+ avatar.addEventListener('mouseover', function() {
+ popup.style.display = 'block'
+ });
+
+ avatar.addEventListener('mouseleave', function() {
+ popup.style.display = 'none'
+ });
+
+ const initials = document.createElement('p')
+ initials.className = initialsCSS
+ initials.textContent = userInitials
+
+ const statusIndicator = document.createElement('div')
+ statusIndicator.className = statusIndicatorCSS
+ statusIndicator.id = 'status-indicator'
+
+ avatarsElement.appendChild(avatar)
+ avatar.appendChild(initials)
+ avatar.appendChild(statusIndicator)
+}
+
+async function getOtherAvatars(otherMembers) {
+ const usersCount = otherMembers.length
+
+ {otherMembers.map((user, index) => {
+ addAvatar(user, usersCount, index)
+ })}
+}
+
+function createUserInfo(user, isSelf = false) {
+ const userDiv = document.createElement('div')
+ userDiv.className = 'user'
+
+ const wrapper = document.createElement('div');
+ wrapper.className = 'wrapper';
+ userDiv.appendChild(wrapper);
+
+ const initials = user.profileData.name
+ .split(" ")
+ .map(word => word.charAt(0))
+ .join("");
+
+ const name = isSelf
+ ? `${user.profileData.name} (You)`
+ : user.profileData.name;
+
+ const userInfoContainer = document.createElement('div');
+ userInfoContainer.className = 'userInfoContainer';
+ userInfoContainer.style.backgroundColor = user.isConnected
+ ? user.profileData.memberColor
+ : "rgb(229 231 235)";
+ userInfoContainer.id = 'avatar';
+ wrapper.appendChild(userInfoContainer)
+
+ const initialsElement = document.createElement('p');
+ initialsElement.className = 'smallText';
+ initialsElement.style.color = user.isConnected ? "#fff" : "rgb(156 163 175)";
+ initialsElement.textContent = initials;
+
+ userInfoContainer.appendChild(initialsElement);
+
+ const userListContainer = document.createElement('div');
+ userListContainer.className = 'userList';
+ userListContainer.id = 'user-list';
+
+ const nameElement = document.createElement('p');
+ nameElement.className = 'name';
+ nameElement.textContent = name;
+
+ userListContainer.appendChild(nameElement);
+
+ wrapper.appendChild(userInfoContainer);
+ wrapper.appendChild(userListContainer);
+
+ return userDiv;
+}
+
+const otherMembers = await space.members.getOthers()
+document.getElementById('avatars').style.width = calculateTotalWidth(otherMembers)
diff --git a/examples/vanilla-avatar-stack/styles.css b/examples/vanilla-avatar-stack/styles.css
new file mode 100644
index 0000000..9d51873
--- /dev/null
+++ b/examples/vanilla-avatar-stack/styles.css
@@ -0,0 +1,412 @@
+html {
+ line-height: 1.5;
+ -webkit-text-size-adjust: 100%;
+ -moz-tab-size: 4;
+ -o-tab-size: 4;
+ tab-size: 4;
+ font-family: Inter, ui-sans-serif, system-ui;
+}
+
+body {
+ margin: 0;
+ line-height: inherit;
+}
+
+hr {
+ height: 0;
+ color: inherit;
+ border-top-width: 1px;
+}
+
+abbr:where([title]) {
+ -webkit-text-decoration: underline dotted;
+ text-decoration: underline dotted;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-size: inherit;
+ font-weight: inherit;
+}
+
+a {
+ color: inherit;
+ text-decoration: inherit;
+}
+
+b,
+strong {
+ font-weight: bolder;
+}
+
+code,
+kbd,
+samp,
+pre {
+ font-family:
+ ui-monospace,
+ SFMono-Regular,
+ Menlo,
+ Monaco,
+ Consolas,
+ Liberation Mono,
+ Courier New,
+ monospace;
+ font-size: 1em;
+}
+
+small {
+ font-size: 80%;
+}
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+sup {
+ top: -0.5em;
+}
+
+table {
+ text-indent: 0;
+ border-color: inherit;
+ border-collapse: collapse;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+ font-family: inherit;
+ font-size: 100%;
+ font-weight: inherit;
+ line-height: inherit;
+ color: inherit;
+ margin: 0;
+ padding: 0;
+}
+
+button,
+select {
+ text-transform: none;
+}
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+ -webkit-appearance: button;
+ background-color: transparent;
+ background-image: none;
+}
+
+:-moz-focusring {
+ outline: auto;
+}
+
+:-moz-ui-invalid {
+ box-shadow: none;
+}
+
+progress {
+ vertical-align: baseline;
+}
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+ height: auto;
+}
+
+[type="search"] {
+ -webkit-appearance: textfield;
+ outline-offset: -2px;
+}
+
+::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+ -webkit-appearance: button;
+ font: inherit;
+}
+
+summary {
+ display: list-item;
+}
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+ margin: 0;
+}
+
+fieldset {
+ margin: 0;
+ padding: 0;
+}
+
+legend {
+ padding: 0;
+}
+
+ol,
+ul,
+menu {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+textarea {
+ resize: vertical;
+}
+
+input::-moz-placeholder,
+textarea::-moz-placeholder {
+ opacity: 1;
+ color: #9ca3af;
+}
+
+input::placeholder,
+textarea::placeholder {
+ opacity: 1;
+ color: #9ca3af;
+}
+
+button,
+[role="button"] {
+ cursor: pointer;
+}
+
+:disabled {
+ cursor: default;
+}
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+ display: block;
+ vertical-align: middle;
+}
+
+img,
+video {
+ max-width: 100%;
+ height: auto;
+}
+
+*,
+:before,
+:after {
+ box-sizing: border-box;
+ border-width: 0;
+ border-style: solid;
+ border-color: currentColor;
+}
+
+
+/* #app {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+}
+
+#avatar-stack {
+ display: flex;
+ flex-wrap: wrap;
+ max-width: 300px;
+}
+
+.avatar {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: white;
+ font-weight: bold;
+ margin: 5px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+} */
+
+/** AVATARS **/
+
+.avatarsContainer {
+ position: relative;
+ display: flex;
+}
+
+.avatarContainer {
+ position: absolute;
+ right: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.avatar {
+ background-color: rgb(234 88 12);
+ height: 3rem;
+ width: 3rem;
+ border-radius: 9999px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ border: 2px solid #e2e7ef;
+}
+
+.name {
+ font-size: 0.75rem;
+ line-height: 1rem;
+ color: rgb(255 255 255);
+}
+
+.statusIndicator,
+.statusIndicatorOnline {
+ width: 10px;
+ height: 10px;
+ border-radius: 9999px;
+ border: 1.5px solid #e2e7ef;
+ position: absolute;
+ bottom: 0.3rem;
+ left: -0.2rem;
+ transform: translateY(50%) translateX(50%);
+}
+
+.popup {
+ position: absolute;
+ top: 4rem;
+ padding: 1rem;
+ background-color: #000;
+ border-radius: 8px;
+ color: #fff;
+ min-width: 240px;
+}
+
+.nameOthers {
+ z-index: 20;
+ font-size: 0.75rem;
+}
+
+.statusIndicatorOnline {
+ background-color: #10b981;
+}
+
+.textWhite {
+ color: #fff;
+}
+
+.inactiveColor {
+ color: rgb(156 163 175);
+}
+
+.inactiveBackground {
+ background-color: rgb(156 163 175);
+}
+
+/** END AVATARS **/
+
+/** USER INFO **/
+
+.userInfoContainer {
+ height: 2rem;
+ width: 2rem;
+ border-radius: 9999px;
+ display: flex;
+ flex-shrink: 0;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ border: 2px solid #cbd5e0;
+}
+
+.statusIndicator {
+ width: 10px;
+ height: 10px;
+ border-radius: 9999px;
+}
+
+.wrapper {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+}
+
+.userList {
+ padding-left: 0.75rem;
+ width: 100%;
+}
+
+.name {
+ display: block;
+ font-weight: 600;
+ font-size: 0.875rem;
+ margin: 0 0 2px 0;
+}
+
+.statusIndicatorText {
+ font-weight: 500;
+ font-size: 0.75rem;
+ margin: 0 0 0 0.3rem;
+ color: #89929f;
+}
+
+.smallText {
+ font-size: 0.75rem;
+}
+
+/** END USER INFO **/
+
+.example-container {
+ display: flex;
+ position: relative;
+ justify-content: center;
+ align-items: center;
+ border-radius: 1rem;
+ background-color: #f4f8fb;
+ height: auto;
+ width: 100%;
+}
+
+.avatarStackContainer {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ background-color: #f4f8fb;
+ height: 100vh;
+}
+
diff --git a/examples/vanilla-avatar-stack/tsconfig.json b/examples/vanilla-avatar-stack/tsconfig.json
new file mode 100644
index 0000000..bf03b41
--- /dev/null
+++ b/examples/vanilla-avatar-stack/tsconfig.json
@@ -0,0 +1,26 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "useDefineForClassFields": true,
+ "lib": ["DOM", "DOM.Iterable", "ESNext"],
+ "allowJs": false,
+ "skipLibCheck": true,
+ "esModuleInterop": false,
+ "allowSyntheticDefaultImports": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "module": "ESNext",
+ "moduleResolution": "Node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx"
+ },
+ "types": ["vite/client"],
+ "include": ["src"],
+ "references": [
+ {
+ "path": "./tsconfig.node.json"
+ }
+ ]
+ }
diff --git a/examples/vanilla-avatar-stack/tsconfig.node.json b/examples/vanilla-avatar-stack/tsconfig.node.json
new file mode 100644
index 0000000..cdd5821
--- /dev/null
+++ b/examples/vanilla-avatar-stack/tsconfig.node.json
@@ -0,0 +1,8 @@
+{
+ "compilerOptions": {
+ "composite": true,
+ "module": "esnext",
+ "moduleResolution": "node"
+ },
+ "include": ["vite.config.ts"]
+ }
diff --git a/examples/vanilla-avatar-stack/vite.config.ts b/examples/vanilla-avatar-stack/vite.config.ts
new file mode 100644
index 0000000..3c2f3df
--- /dev/null
+++ b/examples/vanilla-avatar-stack/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+ plugins: [react()],
+ publicDir: 'public',
+});
diff --git a/examples/vite-react-avatar-stack-2/.codesandbox/Dockerfile b/examples/vite-react-avatar-stack-2/.codesandbox/Dockerfile
new file mode 100644
index 0000000..3739923
--- /dev/null
+++ b/examples/vite-react-avatar-stack-2/.codesandbox/Dockerfile
@@ -0,0 +1 @@
+FROM node:18-bullseye
\ No newline at end of file
diff --git a/examples/vite-react-avatar-stack-2/.env.example b/examples/vite-react-avatar-stack-2/.env.example
new file mode 100644
index 0000000..dbcc501
--- /dev/null
+++ b/examples/vite-react-avatar-stack-2/.env.example
@@ -0,0 +1,2 @@
+# Use your own API KEY from Ably here:
+VITE_ABLY_KEY=
diff --git a/examples/vite-react-avatar-stack-2/.gitignore b/examples/vite-react-avatar-stack-2/.gitignore
new file mode 100644
index 0000000..26a3ac4
--- /dev/null
+++ b/examples/vite-react-avatar-stack-2/.gitignore
@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+.env
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/vite-react-avatar-stack-2/README.md b/examples/vite-react-avatar-stack-2/README.md
new file mode 100644
index 0000000..76a4c5a
--- /dev/null
+++ b/examples/vite-react-avatar-stack-2/README.md
@@ -0,0 +1,39 @@
+## Overview
+
+
+
+This folder contains the code for the Avatar stack - a demo of how you can leverage [Ably Spaces](https://github.com/ably/spaces) to show a list of currently online users.
+
+Try out the [live demo](https://examples.ably.dev/avatar-stack) of the Avatar stack.
+
+## Running locally
+
+- Fork or clone the [example](https://github.com/ably-labs/realtime-examples/examples/vite-react-avatar-stack).
+- Sign up for an account on [Ably](https://ably.com/sign-up?utm_source=ably-labs&utm_medium=github&utm_campaign=avatar-stack) and get an API KEY.
+- Rename `.env.example` to `.env` and fill in your API KEY in the `VITE_ABLY_KEY` environment variable.
+- Run `yarn` to install dependencies.
+- Run `yarn dev` and go to http://localhost:5173
+
+## Runtime Requirements
+
+- [Node.js](https://nodejs.org/en/)
+- Ably API Key
+- [Yarn](https://yarnpkg.com/)
+
+## Resources
+
+- Learn more about how to build your own [Avatar stack](https://ably.com/examples/avatar-stack?utm_source=ably-labs&utm_medium=github&utm_campaign=avatar-stack).
+- To see what else is possible with Ably check out our other [realtime examples](https://ably.com/examples?utm_source=ably-labs&utm_medium=github&utm_campaign=avatar-stack).
+
+## Support, feedback and troubleshooting
+
+- [Create a GitHub Issue](https://github.com/ably-labs/realtime-examples/issues)
+- [Ably Spaces On GitHub](https://github.com/ably/spaces)
+- [Join our Discord server](https://discord.gg/q89gDHZcBK)
+- [Follow us on Twitter](https://twitter.com/ablyrealtime)
+- [Use our SDKs](https://github.com/ably/)
+- [Visit our website](https://ably.com?utm_source=ably-labs&utm_medium=github&utm_campaign=avatar-stack)
+
+---
+
+[](https://ably.com?utm_source=ably-labs&utm_medium=github&utm_campaign=avatar-stack)
diff --git a/examples/vite-react-avatar-stack-2/favicon.ico b/examples/vite-react-avatar-stack-2/favicon.ico
new file mode 100644
index 0000000..483a4b2
Binary files /dev/null and b/examples/vite-react-avatar-stack-2/favicon.ico differ
diff --git a/examples/vite-react-avatar-stack-2/images/avatar-stack.png b/examples/vite-react-avatar-stack-2/images/avatar-stack.png
new file mode 100644
index 0000000..59e2038
Binary files /dev/null and b/examples/vite-react-avatar-stack-2/images/avatar-stack.png differ
diff --git a/examples/vite-react-avatar-stack-2/index.html b/examples/vite-react-avatar-stack-2/index.html
new file mode 100644
index 0000000..55a9f12
--- /dev/null
+++ b/examples/vite-react-avatar-stack-2/index.html
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
+
+
+
+
Ably Realtime Examples - Avatar stack
+
+
+
+
+
+
+
diff --git a/examples/vite-react-avatar-stack-2/package.json b/examples/vite-react-avatar-stack-2/package.json
new file mode 100644
index 0000000..fef096b
--- /dev/null
+++ b/examples/vite-react-avatar-stack-2/package.json
@@ -0,0 +1,29 @@
+{
+ "name": "@ably-labs/vite-react-avatar-stack-2",
+ "license": "Apache-2.0",
+ "version": "1.0.0",
+ "private": true,
+ "scripts": {
+ "dev": "vite",
+ "build": "tsc && vite build",
+ "preview": "vite preview",
+ "format": "prettier --write ."
+ },
+ "dependencies": {
+ "@ably/spaces": "0.2.0",
+ "ably": "1.2.45",
+ "classnames": "^2.3.2",
+ "dayjs": "^1.11.4",
+ "nanoid": "^5.0.1",
+ "random-words": "^2.0.0",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0"
+ },
+ "devDependencies": {
+ "@types/react": "^18.2.0",
+ "@types/react-dom": "^18.2.0",
+ "@vitejs/plugin-react": "^4.1.0",
+ "typescript": "5.2.2",
+ "vite": "^4.4.9"
+ }
+}
diff --git a/examples/vite-react-avatar-stack-2/src/App.tsx b/examples/vite-react-avatar-stack-2/src/App.tsx
new file mode 100644
index 0000000..d875d88
--- /dev/null
+++ b/examples/vite-react-avatar-stack-2/src/App.tsx
@@ -0,0 +1,83 @@
+import { useMemo, useEffect } from "react";
+import { SpaceProvider, SpacesProvider, useMembers, useSpace } from "@ably/spaces/react";
+import Spaces, { type SpaceMember } from "@ably/spaces";
+import { Avatar } from "./components/Avatar";
+import "./styles/avatars.css";
+
+export type Member = Omit
& {
+ profileData: { memberColor: string; name: string };
+};
+
+const colors = ["#9951F5", "#f1c232", "#f44336"];
+const mockNames = [
+ "Anum Reeve",
+ "Tiernan Stubbs",
+ "Hakim Hernandez",
+];
+
+function AvatarStack() {
+ const name = useMemo(() => {
+ return mockNames[Math.floor(Math.random() * mockNames.length)];
+ }, []);
+ const memberColor = useMemo(() => {
+ return colors[Math.floor(Math.random() * colors.length)];
+ }, []);
+
+ /** 💡 Get a handle on a space instance 💡 */
+ const { space } = useSpace();
+
+ /** 💡 Enter the space as soon as it's available 💡 */
+ useEffect(() => {
+ space?.enter({ name, memberColor });
+
+ return () => {
+ space?.leave();
+ };
+ }, [space]);
+
+ /** 💡 Get everybody in the space including the local member 💡 */
+ const { others, self } = useMembers();
+ const hasMoreUsers = others.length > 3;
+
+ return (
+
+
+ {/** 💡 Add your avatar to the stack.💡 */}
+ {self && (
+
+ )}
+
+ {/** 💡 Stack of first 4 user avatars excluding yourself.💡 */}
+ {others.slice(0, 4).map(( other ) => {
+ return (
+
+ );
+ })}
+
+ {hasMoreUsers &&
+
+ }
+
+
+
setHover(true)}
+ onMouseLeave={() => setHover(false)}
+ id="avatar"
+ >
+
{userInitials}
+
+ {hover && self ? (
+
+
+
+ ) : null}
+
+ {/** 💡 Stack of first 5 user avatars including yourself.💡 */}
+
+
+
setHoveredClientId(user.clientId)}
+ onMouseLeave={() => setHoveredClientId(null)}
+ id="avatar"
+ >
+
{userInitials}
+
+
+
+ {hoveredClientId === user.clientId ? (
+
+
+
+ ) : null}
+
+
+
+ {/* 💡 Display the name of the user from the `profileData` object 💡 */}
+
+
+
setHover(true)}
+ onMouseLeave={() => setHover(false)}
+ >
+
You
+
+
+ {hover && self ? (
+
+
+
+ ) : null}
+
+
+