Skip to content

Commit

Permalink
Update grouphug.mdx (#16)
Browse files Browse the repository at this point in the history 
Modify the document according to the README of the grouphug repo
  • Loading branch information
@murumury
murumury authored Jan 3, 2024
1 parent 7e66639 commit e4acc83
Showing 1 changed file with 100 additions and 40 deletions.
140 changes: 100 additions & 40 deletions pages/docs/components/grouphug.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,71 +2,131 @@
title: Group Hug
---

## Online Demo
## GroupHug

![](https://badgen.net/npm/v/@yomo/group-hug-react)

Live collaborator avatars for multiplayer web apps

[Online Demo](https://allegrocloud.io/preview/clewfjysp0008osvwuina6qnf)

## Getting Started
## 🥷🏼 Usage

Install with npm:

```
$ npm i --save @yomo/group-hug-react
npm i --save @yomo/group-hug-react
```

Create a [Presence](/interface/presence) instance, Then add `<GroupHug />` to pages:

```js {30-37}
import GroupHug from "@yomo/group-hug-react";
import "@yomo/group-hug-react/style.css";
import { createPresence } from "@yomo/presence";
import { nanoid } from 'nanoid';
import { useRouter } from "next/router";
import { useEffect, useRef, useState } from "react";

export default () => {
const id = useRef<string>(nanoid());
const [name, setName] = useState<string>("");
const presence = useRef(null);
const router = useRouter();

useEffect(() => {
if (!presence.current) {
presence.current = createPresence("https://lo.yomo.dev/v1", {
publicKey: process.env.NEXT_PUBLIC_PRESENCE_PUBLIC_KEY,
id: id.current,
});
}
return () => {
presence.current = null;
};
}, []);

if (!presence.current) return <div></div>;
Create a [Presence](https://github.com/yomorun/presencejs) instance

```js
import Presence from "@yomo/presence";

// create an instance.
const presence = new Presence("https://lo.yomo.dev:8443/v1", {
publicKey: "DEV_TOKEN",
id,
debug: true,
});
```

Add `<GroupHug />` to pages:

```js
const App = () => {
const [darkMode, setDarkMode] = useState(true);
return (
<div>
<GroupHug
presence={presence.current}
channel="pjs-doc"
id={id.current}
size={36}
darkMode={true}
avatarBorderWidth={2}
presence={presence}
id={peerId}
name={peerDisplayName}
darkMode={darkMode}
/>
</div>
);
};
```

## Self-hosting
## 🧪 Props

According to the demo code above, we can see an avatar with the default style.

Furthermore, we offer the option to utilize custom styles should you desire

If the `avatar` image is not specified, [avvvatars](https://avvvatars.com/) will
be utilized as the placeholder.

Similarly, if you do not specify the color of `avatarBorderColor`, a random
color will be assigned automatically.

Grouphug provides many style-related properties, you can customize the avatar
with your own style by setting these properties.

Grouphug offers a plethora of style-related properties, enabling you to
personalize the avatar according to your own preferences by configuring these
properties.

Below are the comprehensive customization options:

```jsx
<GroupHug
presence={presence}
channel={channel}
id={id}
name={"Noah"}
placeholder={shape}
size={24}
darkMode={true}
avatar={"https://avatars.githubusercontent.com/u/33050549?v=4"}
avatarTextColor={"white"}
avatarBorderWidth={3}
avatarBorderColor={"blue"}
avatarBackgroundColor={"red"}
overlapping={true}
transparency={0.5}
maximum={6}
MPOP={true}
onMouseEnter={() => console.log(`mouse enter`)}
onMouseLeave={() => console.log(`mouse leave`)}
/>;
```

Here are the full props:

| name | type | description |
| --------------------- | -------------------- | --------------------------------------------------------------------------------------------------------- |
| presence | Promise\<IPresence> | The Presence instance |
| channel | string | The channel name of the Presence instance |
| id | string | The unique identifier of the user |
| name | string | The name or display name of the user |
| avatar | string | The avatar image url of the user |
| placeholder | 'shape', 'character' | The placeholder image when `avatar` absence |
| MPOP | boolean | A boolean value indicating whether the MPOP (Multiple Points of Presence) feature is enabled for the user |
| darkMode | boolean | A boolean value indicating whether the dark mode is enabled for the user |
| avatarTextColor | string | The color of the text displayed on the user's avatar |
| avatarBackgroundColor | string | The background color of the user's avatar |
| avatarBorderColor | string | The border color of the user's avatar |
| avatarBorderWidth | number | The width of the border around the user's avatar |
| size | number | The size of the avatar in pixels |
| overlapping | boolean | A boolean value indicating whether the avatars should overlap when multiple users are present |
| transparency | number | The transparency level of the avatars, ranging from 0 (fully transparent) to 1 (fully opaque) |
| maximum | number | The maximum number of avatars stacking |
| onMouseEnter | (user: User) => void | A callback function triggered when the mouse pointer enters the user's avatar |
| onMouseLeave | (user: User) => void | A callback function triggered when the mouse pointer leaves the user's avatar |

## 👩‍🔬 Local Development

1. Start local `prscd` dev server: `bun run prscd:dev`
2. Start Grouphug code generator tool: `bun run dev`

<img width="1024" alt="image" src="https://github.com/yomorun/presencejs/assets/65603/b7f5f8a1-e0db-4aac-8b01-861d8aa535a2" />

## 🌎 Self-hosting

see [prscd](/prscd/introduction)

## License
## 🧘🏻 License

The MIT License

1 comment on commit e4acc83

@vercel
Copy link

@vercel vercel bot commented on e4acc83 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

presencejs-doc – ./

presencejs-doc-git-gh-pages-yomorun.vercel.app
presencejs-doc-yomorun.vercel.app
presencejs-doc.vercel.app
presence-doc.yomo.run

Please sign in to comment.