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