-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathrecoil-examples.html
63 lines (58 loc) · 10.4 KB
/
recoil-examples.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="en" class="light-mode">
<head>
<meta charset="utf-8" />
<link rel="icon" href="./favicon.png" />
<link rel="stylesheet" type="text/css" href="./site.css" />
<meta name="viewport" content="width=device-width" />
<link href="./_app/immutable/assets/3.84abd576.css" rel="stylesheet">
<link href="./_app/immutable/assets/sterling.ba12fde9.css" rel="stylesheet">
<link href="./_app/immutable/assets/Header.9b742ac5.css" rel="stylesheet">
<link href="./_app/immutable/assets/Link.202292e5.css" rel="stylesheet">
<link href="./_app/immutable/assets/Post.a1c147c5.css" rel="stylesheet">
<link rel="modulepreload" href="./_app/immutable/entry/start.2c55a661.js">
<link rel="modulepreload" href="./_app/immutable/chunks/scheduler.75f5293f.js">
<link rel="modulepreload" href="./_app/immutable/chunks/singletons.74c6a932.js">
<link rel="modulepreload" href="./_app/immutable/chunks/paths.21152387.js">
<link rel="modulepreload" href="./_app/immutable/entry/app.4df5770f.js">
<link rel="modulepreload" href="./_app/immutable/chunks/index.36074062.js">
<link rel="modulepreload" href="./_app/immutable/nodes/0.1375ff03.js">
<link rel="modulepreload" href="./_app/immutable/nodes/3.b744dd68.js">
<link rel="modulepreload" href="./_app/immutable/chunks/each.e59479a4.js">
<link rel="modulepreload" href="./_app/immutable/chunks/spread.8a54911c.js">
<link rel="modulepreload" href="./_app/immutable/chunks/Button.fb729d6d.js">
<link rel="modulepreload" href="./_app/immutable/chunks/Header.5ff96dfd.js">
<link rel="modulepreload" href="./_app/immutable/nodes/7.79d3ebc0.js">
<link rel="modulepreload" href="./_app/immutable/chunks/Link.94f51915.js">
<link rel="modulepreload" href="./_app/immutable/chunks/NpmIcon.b54d2cdc.js">
<link rel="modulepreload" href="./_app/immutable/chunks/Post.19bcd7ab.js">
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents"> <div class="root"><div class="header svelte-7d51k5"><a href="/" class="svelte-7d51k5" data-svelte-h="svelte-bk6u5r">geoffcox.github.io</a><span class="logo svelte-7d51k5" role="button" tabindex="-1"><svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" fill="#000000" width="60px" height="60px" class="rooster"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill="#E1E8ED" d="M20.143 32.215a2.143 2.143 0 1 1-4.286 0a2.143 2.143 0 0 1 4.286 0z"></path><path fill="#E1E8ED" d="M27.643 15.643C27.643 10.317 23.324 6 18 6a9.643 9.643 0 0 0-9.643 9.643c0 5.357-1.071 16.572-1.071 16.572a2.143 2.143 0 0 0 4.286 0a2.144 2.144 0 0 0 4.285 0h4.286a2.144 2.144 0 0 0 4.287 0a2.143 2.143 0 0 0 4.286 0c-.002 0-1.073-11.215-1.073-16.572z"></path><path fill="#DD2E44" d="M20 3c0 2.209-1.447 6-2 6c-.552 0-2-3.791-2-6s1.448-3 2-3c.553 0 2 .791 2 3zm-4.365 30c0-2.612 1.711-8 2.365-8c.653 0 2.365 5.388 2.365 8S18.652 36 18 36c-.654 0-2.365-.388-2.365-3z"></path><ellipse fill="#F4900C" cx="18" cy="22.5" rx="7" ry="4.5"></ellipse><path fill="#FFAC33" d="M25 22.5c0 1.5-14 1.5-14 0s4.791-4.5 7-4.5s7 3 7 4.5z"></path><circle fill="#292F33" cx="11.5" cy="18.5" r="1.5"></circle><circle fill="#292F33" cx="24.5" cy="18.5" r="1.5"></circle></g></svg></span> </div> <div class="content-container svelte-5oz901"> <div class="split svelte-5oz901"><div class="nav svelte-5oz901"><div class="nav-header svelte-5oz901" role="separator"></div> <a href="./resume" class="svelte-5oz901">Geoff's Resume</a><div class="nav-header svelte-5oz901" role="separator">Open Source</div> <a href="./binary-search" class="svelte-5oz901">binary-search</a><a href="./recoil-examples" class="svelte-5oz901">recoil-examples</a><a href="./splitters" class="svelte-5oz901">react-splitter / svelte-splitter</a><a href="./sterling-svelte" class="svelte-5oz901">sterling-svelte</a><a href="./trie-search" class="svelte-5oz901">trie-search</a><div class="nav-header svelte-5oz901" role="separator">Opinion</div> <a href="./why-i-love-svelte" class="svelte-5oz901">Why I love Svelte</a><div class="nav-header svelte-5oz901" role="separator">Stories</div> <a href="./unpredictable-users" class="svelte-5oz901">Unpredictable users</a><a href="./speed-estimation" class="svelte-5oz901">Speed Estimation</a><div class="nav-header svelte-5oz901" role="separator">Bookshelf</div> <a href="./software-architecture-books" class="svelte-5oz901">Software Architecture Books</a></div> <div class="content svelte-5oz901"><div class="post svelte-nmvp7s"><div class="category svelte-nmvp7s">Open Source Examples</div> <div class="headline svelte-nmvp7s"><a href="/recoil-examples" class="svelte-nmvp7s">recoil-examples</a></div> <div class="content-section svelte-nmvp7s"><div class="container svelte-nmvp7s"><div class="content"><p data-svelte-h="svelte-1kiz8o2">Recoil JS is my favorite React state management library. It is a lightning-fast, minimal, and
ideomatic React. It blends MobX's observability and Redux's flat data islands.</p> <p data-svelte-h="svelte-x48sx8">For some unknown reason, the recoil examples on the official site are documentation only. I
created a project for each example so you can build and debug them. Additionally, I provided
an example of a dispatcher pattern using recoil.</p></div></div> </div> <div class="links svelte-nmvp7s"><div class="link svelte-j5c9xl"><a href="https://github.com/GeoffCox/recoil-examples" target="_blank" class="svelte-j5c9xl"><svg xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="-3 -3 30 30"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5229 6.47715 22 12 22C17.5229 22 22 17.5229 22 12C22 6.47715 17.5229 2 12 2ZM0 12C0 5.3726 5.3726 0 12 0C18.6274 0 24 5.3726 24 12C24 18.6274 18.6274 24 12 24C5.3726 24 0 18.6274 0 12Z" fill="rgba(0,0,0,0.7)" stroke="none"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M9.59162 22.7357C9.49492 22.6109 9.49492 21.4986 9.59162 19.399C8.55572 19.4347 7.90122 19.3628 7.62812 19.1833C7.21852 18.9139 6.80842 18.0833 6.44457 17.4979C6.08072 16.9125 5.27312 16.8199 4.94702 16.6891C4.62091 16.5582 4.53905 16.0247 5.84562 16.4282C7.15222 16.8316 7.21592 17.9303 7.62812 18.1872C8.04032 18.4441 9.02572 18.3317 9.47242 18.1259C9.91907 17.9201 9.88622 17.1538 9.96587 16.8503C10.0666 16.5669 9.71162 16.5041 9.70382 16.5018C9.26777 16.5018 6.97697 16.0036 6.34772 13.7852C5.71852 11.5669 6.52907 10.117 6.96147 9.49369C7.24972 9.07814 7.22422 8.19254 6.88497 6.83679C8.11677 6.67939 9.06732 7.06709 9.73672 7.99999C9.73737 8.00534 10.6143 7.47854 12.0001 7.47854C13.386 7.47854 13.8777 7.90764 14.2571 7.99999C14.6365 8.09234 14.94 6.36699 17.2834 6.83679C16.7942 7.79839 16.3844 8.99999 16.6972 9.49369C17.0099 9.98739 18.2372 11.5573 17.4833 13.7852C16.9807 15.2706 15.9927 16.1761 14.5192 16.5018C14.3502 16.5557 14.2658 16.6427 14.2658 16.7627C14.2658 16.9427 14.4942 16.9624 14.8233 17.8058C15.0426 18.368 15.0585 19.9739 14.8708 22.6234C14.3953 22.7445 14.0254 22.8257 13.7611 22.8673C13.2924 22.9409 12.7835 22.9822 12.2834 22.9982C11.7834 23.0141 11.6098 23.0123 10.9185 22.948C10.4577 22.9051 10.0154 22.8343 9.59162 22.7357Z" fill="rgba(0,0,0,0.7)" stroke="none"></path></svg></a> </div> <div class="link svelte-j5c9xl"><a href="https://recoiljs.org/" target="_blank" class="svelte-j5c9xl"><svg xmlns="http://www.w3.org/2000/svg" width="28px" height="28px" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.83824 18.4467C10.0103 18.7692 10.1826 19.0598 10.3473 19.3173C8.59745 18.9238 7.07906 17.9187 6.02838 16.5383C6.72181 16.1478 7.60995 15.743 8.67766 15.4468C8.98112 16.637 9.40924 17.6423 9.83824 18.4467ZM11.1618 17.7408C10.7891 17.0421 10.4156 16.1695 10.1465 15.1356C10.7258 15.0496 11.3442 15 12.0001 15C12.6559 15 13.2743 15.0496 13.8535 15.1355C13.5844 16.1695 13.2109 17.0421 12.8382 17.7408C12.5394 18.3011 12.2417 18.7484 12 19.0757C11.7583 18.7484 11.4606 18.3011 11.1618 17.7408ZM9.75 12C9.75 12.5841 9.7893 13.1385 9.8586 13.6619C10.5269 13.5594 11.2414 13.5 12.0001 13.5C12.7587 13.5 13.4732 13.5593 14.1414 13.6619C14.2107 13.1384 14.25 12.5841 14.25 12C14.25 11.4159 14.2107 10.8616 14.1414 10.3381C13.4732 10.4406 12.7587 10.5 12.0001 10.5C11.2414 10.5 10.5269 10.4406 9.8586 10.3381C9.7893 10.8615 9.75 11.4159 9.75 12ZM8.38688 10.0288C8.29977 10.6478 8.25 11.3054 8.25 12C8.25 12.6946 8.29977 13.3522 8.38688 13.9712C7.11338 14.3131 6.05882 14.7952 5.24324 15.2591C4.76698 14.2736 4.5 13.168 4.5 12C4.5 10.832 4.76698 9.72644 5.24323 8.74088C6.05872 9.20472 7.1133 9.68686 8.38688 10.0288ZM10.1465 8.86445C10.7258 8.95042 11.3442 9 12.0001 9C12.6559 9 13.2743 8.95043 13.8535 8.86447C13.5844 7.83055 13.2109 6.95793 12.8382 6.2592C12.5394 5.69894 12.2417 5.25156 12 4.92432C11.7583 5.25156 11.4606 5.69894 11.1618 6.25918C10.7891 6.95791 10.4156 7.83053 10.1465 8.86445ZM15.6131 10.0289C15.7002 10.6479 15.75 11.3055 15.75 12C15.75 12.6946 15.7002 13.3521 15.6131 13.9711C16.8866 14.3131 17.9412 14.7952 18.7568 15.2591C19.233 14.2735 19.5 13.1679 19.5 12C19.5 10.8321 19.233 9.72647 18.7568 8.74093C17.9413 9.20477 16.8867 9.6869 15.6131 10.0289ZM17.9716 7.46178C17.2781 7.85231 16.39 8.25705 15.3224 8.55328C15.0189 7.36304 14.5908 6.35769 14.1618 5.55332C13.9897 5.23077 13.8174 4.94025 13.6527 4.6827C15.4026 5.07623 16.921 6.08136 17.9716 7.46178ZM8.67765 8.55325C7.61001 8.25701 6.7219 7.85227 6.02839 7.46173C7.07906 6.08134 8.59745 5.07623 10.3472 4.6827C10.1826 4.94025 10.0103 5.23076 9.83823 5.5533C9.40924 6.35767 8.98112 7.36301 8.67765 8.55325ZM15.3224 15.4467C15.0189 16.637 14.5908 17.6423 14.1618 18.4467C13.9897 18.7692 13.8174 19.0598 13.6527 19.3173C15.4026 18.9238 16.921 17.9186 17.9717 16.5382C17.2782 16.1477 16.3901 15.743 15.3224 15.4467ZM12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" fill="currentColor"></path></svg></a> </div> </div> </div></div></div></div> </div>
<script>
{
__sveltekit_1cy0fcu = {
base: new URL(".", location).pathname.slice(0, -1),
env: {}
};
const element = document.currentScript.parentElement;
const data = [null,null,null];
Promise.all([
import("./_app/immutable/entry/start.2c55a661.js"),
import("./_app/immutable/entry/app.4df5770f.js")
]).then(([kit, app]) => {
kit.start(app, element, {
node_ids: [0, 3, 7],
data,
form: null,
error: null
});
});
}
</script>
</div>
</body>
</html>