├── .gitignore
├── README.md
├── package.json
├── rollup.config.js
├── src
└── index.tsx
├── tsconfig.json
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 |
2 | # created by git-ignore
3 | # Logs
4 | logs
5 | *.log
6 |
7 | # Runtime data
8 | pids
9 | *.pid
10 | *.seed
11 |
12 | # Directory for instrumented libs generated by jscoverage/JSCover
13 | lib-cov
14 |
15 | # Coverage directory used by tools like istanbul
16 | coverage
17 |
18 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
19 | .grunt
20 |
21 | # Compiled binary addons (http://nodejs.org/api/addons.html)
22 | build/Release
23 |
24 | # Dependency directory
25 | # Deployed apps should consider commenting this line out:
26 | # see https://npmjs.org/doc/faq.html#Should-I-check-my-node_modules-folder-into-git
27 | node_modules
28 |
29 |
30 | # created by git-ignore
31 | .DS_Store
32 | .AppleDouble
33 | .LSOverride
34 |
35 | # Icon must ends with two \r.
36 | Icon
37 |
38 |
39 | # Thumbnails
40 | ._*
41 |
42 | # Files that might appear on external disk
43 | .Spotlight-V100
44 | .Trashes
45 |
46 | /esm/
47 | /umd/
48 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-lambda
2 |
3 | Anonymous functional components for React. How about using hooks inside hooks?
4 |
5 | ## Motivation
6 |
7 | I wished there’s a way to use hooks inside a component’s *subtree*.
8 | That means all the state and effects should be localized in that subtree only.
9 | Using it in my current project, it helped me write more cohesive code:
10 |
11 | ```js
12 | import λ from 'react-lambda'
13 | function AppNav() {
14 | return
24 | }
25 | ```
26 |
27 | ## Another example
28 |
29 |
30 |
31 | ```js
32 | import λ from 'react-lambda'
33 |
34 | function App() {
35 | const [n, setN] = useState(3)
36 | const more = () => setN(n => n + 1)
37 | const less = () => setN(n => n - 1)
38 | return (
39 |
40 |
react-lambda demo
41 |
42 |
43 |
44 |
45 |
46 | {Array(n)
47 | .fill()
48 | .map((_, i) =>
49 | λ(i, () => {
50 | // Hooks inside component body, how cool is that!
51 | const [v, setV] = useState(0)
52 | const inc = () => setV(v => v + 1)
53 | return - {v}
54 | })
55 | )}
56 |
57 |