feat: extract cursor component

packages/example/src/App.tsx

@@ -19,9 +19,11 @@ class App extends Component<{}, { rooms: string[] }> {
 
     return (
       <Container>
-        <AddButton type="button" onClick={this.addRoom}>
-          Add Room
-        </AddButton>
+        <Panel>
+          <AddButton type="button" onClick={this.addRoom}>
+            Add Room
+          </AddButton>
+        </Panel>
         {rooms.map(room => (
           <Room key={room} slug={room} removeRoom={this.removeRoom(room)} />
         ))}
@@ -46,6 +48,10 @@ export default App
 
 const Container = styled.div``
 
+const Panel = styled.div`
+  display: flex;
+`
+
 const Button = styled.button`
   padding: 6px 14px;
   display: block;

packages/example/src/Client.tsx

@@ -45,18 +45,10 @@ class Client extends Component<ClienProps> {
         }
       },
       annotationDataMixin: {
-        name: this.props.name
+        name: this.props.name,
+        color,
+        alphaColor: color.slice(0, -2) + '0.2)'
       },
-      cursorStyle: {
-        background: color
-      },
-      caretStyle: {
-        background: color
-      },
-      selectionStyle: {
-        background: color.slice(0, -2) + '0.2)'
-      },
-      renderCursor: data => data.get('name'),
       // renderPreloader: () => <div>PRELOADER!!!!!!</div>,
       onConnect: this.onConnect,
       onDisconnect: this.onDisconnect