a small incremental UI library for the web
javascript
web
ui
Add useRef
+18
-1
+3
-1
demos/todo/todo.tsx
+3
-1
demos/todo/todo.tsx
···
1
1
import * as Noir from '../../js/noir.ts';
2
-
import { useState, useEffect, useStyle, useFiber } from '../../js/hooks.ts';
2
+
import { useState, useEffect, useRef, useStyle, useFiber } from '../../js/hooks.ts';
3
3
4
4
function App(props) {
5
5
useStyle(`
···
157
157
158
158
function Item({item, toggleComplete}) {
159
159
const [dropStatus, setDropStatus] = useState(null);
160
+
const labelRef = useRef(null);
160
161
161
162
useStyle(`
162
163
label {
···
188
189
189
190
return (
190
191
<label
192
+
ref={labelRef}
191
193
class={dropStatus}
192
194
draggable="true"
193
195
onDragLeave={ev => {
+1
js/commit.ts
+1
js/commit.ts
+14
js/hooks.ts
+14
js/hooks.ts
···
7
7
export const Hook = {
8
8
State: 'state',
9
9
Effect: 'effect',
10
+
Ref: 'ref',
10
11
Style: 'style',
11
12
};
12
13
13
14
const {
14
15
State,
15
16
Effect,
17
+
Ref,
16
18
Style,
17
19
} = Hook;
18
20
···
77
79
fiber.hooks[pointer + 1] = newCleanup;
78
80
});
79
81
}
82
+
}
83
+
84
+
export function useRef(initialValue) {
85
+
const fiber = useFiber();
86
+
const pointer = pushHook(fiber, Ref);
87
+
88
+
let ref = fiber.hooks[pointer + 1];
89
+
if(!ref) {
90
+
fiber.hooks[pointer + 1] = ref = {current: initialValue};
91
+
}
92
+
93
+
return ref;
80
94
}
81
95
82
96
export function useStyle(text) {