UIKit React
UIKit React is a library that you can add to your new or existing React application. The UIKit uses the Web API to communicate with the Weavy environment and is composed of various UI components for the Weavy apps.
Installation
Install UIKit React from npm (you can also clone the open-source weavy-uikit-react repo and build it yourself).
npm install @weavy/uikit-react
Usage
Now you want to add components from the @weavy/uikit-react
library to your React app.
In the exemple below we add a <Chat>
component that renders a fully functional group chat.
Add components
In your app.tsx
or wherever you like, add the following (note that that chat component must be wrapped in a <WeavyProvider>
element).
import React from 'react';
import { WeavyClient, WeavyProvider, Chat } from '@weavy/uikit-react';
const weavyClient = new WeavyClient({
url: "{WEAVY-SERVER}",
tokenFactory: async (refresh) => "{ACCESS-TOKEN}"
});
function App() {
return (
<div className="App">
<WeavyProvider client={weavyClient}>
<Chat uid="demochat" />
</WeavyProvider>
</div>
)
}
export default App;
Also import the weavy styles to your root app component.
import "@weavy/uikit-react/dist/css/weavy.css";
Configure authentication
Next step is to configure authentication. In this quickstart, we simply call the Weavy API with curl
on the command line to obtain an access_token
,
but in a real world scenario you should follow the steps in the authentication article for implementing a proper tokenFactory
function.
curl https://{WEAVY-SERVER}/api/users/demouser/tokens -H "Authorization: Bearer {API_KEY}" --json "{ 'name': 'Demo User', 'expires_in': 7200}"
Replace the {WEAVY-SERVER}
and {API-KEY}
placeholders with the url and API key to your environment .
The request above will return an user access token for a user with the unique id demouser
(if the user doesn't exist in the Weavy environment, the user is created).
In the React code snippet above, replace {WEAVY-SERVER}
with the url to your Weavy account environment and {ACCESS_TOKEN}
with the token you got in response to the Weavy API request above.
Init app
Before the chat component can be loaded in your application, a corresponding Weavy app must be initialized in your Weavy environment.
This is normally done from your backend code with a server-to-server request using an API key,
but in this quickstart we show you how to initialize the app on your command line using curl
.
curl https://{WEAVY-SERVER}/api/apps/init -H "Authorization: Bearer {API-KEY}" --json "{ app: { uid: 'demochat', name: 'Demo chat', type: 'chat' }, user: { uid: 'demouser' } }"
Example of initializing an app with the Weavy API. This request creates the app if needed and also adds the demouser
as a member of the app.
Once the initialization has been done, the Chat component with uid demochat
can be loaded and used by React.
Done
Start your React app. You should see the Weavy Chat component rendering the demochat
group chat.