1. Reference
2. React UI kit
3. Examples

Examples

The Posts app

This example shows you how you can init and display a Posts component.

React client code

import React, { useState } from 'react';
import { Posts } from '@weavy/uikit-react';
import { useEffect } from 'react';

const MyPostsView = () => {

    const [loading, setLoading] = useState(true);;
    const [completed, setCompleted] = useState(false);
    const contextualId = "my-posts";

    useEffect(() => {
        async function setupContextualApp() {
            var response = await fetch(`/contextual/${contextualId}?type=posts`);
            if (response.ok) {
                setCompleted(true);
            }
            setLoading(false);
        }
        setupContextualApp();
    }, [])

    if (loading) return <div>Loading contextual posts app...</div>

    return (
        <>
            {completed &&
                <div style=>
                    <div style=>
                        <Posts uid={contextualId} />
                    </div>
                </div>
            }
        </>
    )
}

export default PostsView;

Example of how to display a Posts component in your React application

Node server code

...

app.get('/contextual/:id', async (req, res) => {
    // setup contextual app
    let response = await fetch(`${config.get("weavy_environment")}/api/apps/init`, {
        method: 'POST',
        headers: {
            'content-type': 'application/json',
            'Authorization': `Bearer ${apiKey}`
        },
        body: JSON.stringify({ app: { uid: req.params.id, name: req.params.id, type: req.query.type }, user: { uid: req.session.user } })
    });

    res.end("OK");
});

...

Example of how to init the contectual apps from you Node server code