updated toggle example

package.json

@@ -1,6 +1,6 @@
 {
  "name": "react-ros",
- "version": "0.0.1",
+ "version": "0.0.2",
  "description": "A React Component Library to help connect your website to your robot",
  "author": "flynneva",
  "license": "MIT",

src/components/examples/ToggleConnect.js

@@ -2,13 +2,14 @@ import React from 'react'
 import { useROS } from '../ROS'
 
 function ToggleConnect() {
- const { isConnected, topics, toggleConnection } = useROS();
+ const { isConnected, topics, url, toggleConnection } = useROS();
 
  return (
  <div>
+ <p><strong>ROS url:</strong> {url}</p>
  <button onClick={ toggleConnection }>Toggle Connect</button>
- <div>Status of ROS: { isConnected ? "connected" : "not connected" }</div>
- <div>Topics detected:</div>
+ <p><strong>Status of ROS:</strong> { isConnected ? "connected" : "not connected" }</p>
+ <p><strong>Topics detected:</strong></p>
  { topics.map((topic, i) => <li key={i}> {topic.path}</li> )}
  </div>
  );

src/components/examples/ToggleConnect.mdx

@@ -4,6 +4,10 @@ route: /examples/toggle_connect/
 menu: Examples
 ---
 
+## ToggleConnect
+
+If you have ROS installed, go ahead and try out the demo below. Just start up a [rosbridge server](https://github.com/RobotWebTools/rosbridge_suite) using the default parameters and hit the button - you should see your topics listed along with the status of the connection changing too.
+
 import { Playground } from 'docz'
 
 import { ROS } from '../ROS'
@@ -15,3 +19,25 @@ import ToggleConnect from './ToggleConnect'
  <ToggleConnect />
  </ROS>
 </Playground>
+
+
+```javascript
+import React from 'react'
+import { useROS } from '../ROS'
+
+function ToggleConnect() {
+ const { isConnected, topics, url, toggleConnection } = useROS();
+
+ return (
+ <div>
+ <p><strong>ROS url:</strong> {url}</p>
+ <button onClick={ toggleConnection }>Toggle Connect</button>
+ <p><strong>Status of ROS:</strong> { isConnected ? "connected" : "not connected" }</p>
+ <p><strong>Topics detected:</strong></p>
+ { topics.map((topic, i) => <li key={i}> {topic.path}</li> )}
+ </div>
+ );
+}
+
+export default ToggleConnect;
+```