Last active
July 19, 2021 02:33
-
-
Save wickedev/bc1089fa823653b0d8feed6710d10c1e to your computer and use it in GitHub Desktop.
valtio sample
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from "react"; | |
| import { proxy, useSnapshot } from "valtio"; | |
| class Store { | |
| public counter = 0; | |
| public text = ""; | |
| get double() { | |
| return this.counter * 2; | |
| } | |
| } | |
| const store = proxy(new Store()); | |
| function App() { | |
| return ( | |
| <div> | |
| <ValtioSample /> | |
| </div> | |
| ); | |
| } | |
| function ValtioSample() { | |
| return ( | |
| <div className="mt-1"> | |
| <ValtioValue /> | |
| <ValtioText /> | |
| <ValtioComputed /> | |
| <ValtioButton /> | |
| <ValtioInput /> | |
| </div> | |
| ); | |
| } | |
| function ValtioValue() { | |
| const value: Store = useSnapshot(store); | |
| return ( | |
| <div className="p-1 m-1 outline-black"> | |
| {value.counter} | |
| </div> | |
| ); | |
| } | |
| function ValtioText() { | |
| const value: Store = useSnapshot(store); | |
| return ( | |
| <div className="p-1 m-1 outline-black"> | |
| {value.text} | |
| </div> | |
| ); | |
| } | |
| function ValtioComputed() { | |
| const value: Store = useSnapshot(store); | |
| return ( | |
| <div className="p-1 m-1 outline-black"> | |
| {value.double} | |
| </div> | |
| ); | |
| } | |
| function ValtioButton() { | |
| return ( | |
| <button | |
| className="m-1" | |
| onClick={() => { | |
| store.counter++; | |
| }} | |
| > | |
| + | |
| </button> | |
| ); | |
| } | |
| function ValtioInput() { | |
| return ( | |
| <input | |
| className="m-1" | |
| onChange={(e) => { | |
| store.text = e.target.value; | |
| }} | |
| /> | |
| ); | |
| } | |
| export default App; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment