useCloudState.io
Search…
Quick Start
1. Create your app in usecloudstate.io
2. Initiating the client
We recommend you create a separate file that contains the CloudState client. For example:
src/utils/cloudState.js.1
// src/utils/cloudState.js
2
3
import { CloudStateClient } from "@usecloudstate/react-core";
4
import { config } from "@usecloudstate/react-web";
5
6
export const client = new CloudStateClient("<YOUR APP ID>", config);
Copied!
3. Setting up the AuthProvider
The server will only let your users write to the application, if they are authenticated. To do so, you need to set up an AuthProvider.
In your component (or the root component of your application), add the
AuthProvider component:1
// src/App.js
2
3
import React from "react";
4
5
import { AuthProvider } from "@usecloudstate/react-web";
6
import { client } from "./utils/cloudState";
7
8
function App() {
9
return (
10
<div className="App">
11
<AuthProvider client={client} />
12
<main>
13
Hello world!
14
</main>
15
</div>
16
);
17
}
Copied!
4. Store your data using the hooks
After you have set up the AuthProvider, you can use the
client.hooks to interact with the server. 1
// src/components/HelloWorld.js
2
3
import { client } from "./utils/cloudState.js";
4
5
const defaultValue = ""
6
7
function HelloWorld() {
8
const [name, setName] = client.hooks.useCloudState("user.name", defaultValue);
9
10
return (
11
<div className="HelloWorld">
12
<input
13
type="text"
14
value={name}
15
onChange={e => setName(e.target.value)}
16
/>
17
<p>Welcome to my app, {name}!</p>
18
</div>
19
)
20
}
Copied!
client.hooks.useCloudState hook works a lot like React's useState hook. useState hooks store data locally within the React component, whereas useCloudState store data in the CloudState server, while maintaining a local copy.To make sure a React component can persist data between page reloads, user sessions and even across components, you need to provide a
field , which acts like a key for the data in the server.
Last modified 7mo ago