danabra.mov
A tool for people curious about the React Server Components protocol
rscexplorer.dev/
rsc
react
make samples more mobile-friendly
+6
-6
src/client/samples.ts
+6
-6
src/client/samples.ts
···
99
<input
100
name="name"
101
placeholder="Enter your name"
102
-
style={{ padding: '8px 12px', borderRadius: 4, border: '1px solid #ccc' }}
103
/>
104
<button disabled={isPending}>
105
{isPending ? 'Sending...' : 'Greet'}
···
177
178
return (
179
<div style={{ opacity: isPending ? 0.7 : 1 }}>
180
-
{content}
181
-
<button onClick={refresh} disabled={isPending} style={{ marginTop: 12 }}>
182
{isPending ? 'Refreshing...' : 'Refresh'}
183
</button>
184
</div>
185
)
186
}`,
···
409
}
410
411
return (
412
-
<form action={handleSubmit} style={{ marginBottom: 8 }}>
413
-
<input name="name" placeholder="Your name" required />
414
<button>Greet</button>
415
-
{result && <span style={{ marginLeft: 8 }}>{result}</span>}
416
</form>
417
)
418
}`,
···
99
<input
100
name="name"
101
placeholder="Enter your name"
102
+
style={{ flex: 1, minWidth: 0, padding: '8px 12px', borderRadius: 4, border: '1px solid #ccc' }}
103
/>
104
<button disabled={isPending}>
105
{isPending ? 'Sending...' : 'Greet'}
···
177
178
return (
179
<div style={{ opacity: isPending ? 0.7 : 1 }}>
180
+
<button onClick={refresh} disabled={isPending} style={{ marginBottom: 12 }}>
181
{isPending ? 'Refreshing...' : 'Refresh'}
182
</button>
183
+
{content}
184
</div>
185
)
186
}`,
···
409
}
410
411
return (
412
+
<form action={handleSubmit} style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 8 }}>
413
+
<input name="name" placeholder="Your name" required style={{ flex: 1, maxWidth: 120, minWidth: 0, padding: '4px 8px' }} />
414
<button>Greet</button>
415
+
{result && <span>{result}</span>}
416
</form>
417
)
418
}`,
+12
-6
tests/bound.spec.ts
+12
-6
tests/bound.spec.ts
···
105
106
Same action, different bound greetings:
107
108
-
GreetHello, Alice!
109
Greet
110
Greet"
111
`,
···
119
120
Same action, different bound greetings:
121
122
-
GreetHello, Alice!
123
-
GreetHowdy, Bob!
124
Greet"
125
`,
126
);
···
133
134
Same action, different bound greetings:
135
136
-
GreetHello, Alice!
137
-
GreetHowdy, Bob!
138
-
GreetHey, Charlie!"
139
`,
140
);
141
});
···
105
106
Same action, different bound greetings:
107
108
+
Greet
109
+
Hello, Alice!
110
Greet
111
Greet"
112
`,
···
120
121
Same action, different bound greetings:
122
123
+
Greet
124
+
Hello, Alice!
125
+
Greet
126
+
Howdy, Bob!
127
Greet"
128
`,
129
);
···
136
137
Same action, different bound greetings:
138
139
+
Greet
140
+
Hello, Alice!
141
+
Greet
142
+
Howdy, Bob!
143
+
Greet
144
+
Hey, Charlie!"
145
`,
146
);
147
});
+1
-1
tests/refresh.spec.ts
+1
-1
tests/refresh.spec.ts