summaryrefslogtreecommitdiff
path: root/examples/with-nanostores/src/components/AdminsReact.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'examples/with-nanostores/src/components/AdminsReact.jsx')
-rw-r--r--examples/with-nanostores/src/components/AdminsReact.jsx29
1 files changed, 29 insertions, 0 deletions
diff --git a/examples/with-nanostores/src/components/AdminsReact.jsx b/examples/with-nanostores/src/components/AdminsReact.jsx
new file mode 100644
index 000000000..a03df1f47
--- /dev/null
+++ b/examples/with-nanostores/src/components/AdminsReact.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { useStore } from 'nanostores/react';
+
+import { admins } from '../store/admins.js';
+import { counter, increaseCounter, decreaseCounter } from '../store/counter.js';
+
+const AdminsReact = () => {
+ const list = useStore(admins);
+ const count = useStore(counter);
+ return (
+ <>
+ <h1>React</h1>
+ <ul>
+ {list.map((user) => (
+ <li key={user.name}>{JSON.stringify(user, null, 2)}</li>
+ ))}
+ </ul>
+ <div>
+ <h3>Counter</h3>
+ <p>{count}</p>
+ <button onClick={decreaseCounter}>-1</button>
+ <button onClick={increaseCounter}>+1</button>
+ </div>
+ <br />
+ </>
+ );
+};
+
+export default AdminsReact;