Skip to main content

ActivityPub Components


npm install @semapps/activitypub-components



Load an ActivityStreams Collection from its URL and display it in a list of type Datagrid, SimpleList, etc.

import { Show, SimpleList } from 'react-admin';
import { CollectionList } from '@semapps/activitypub-components';

export const MyPage = props => (
<CollectionList collectionUrl="http://localhost:3000/alice/followers" resource="Actor">
<SimpleList primaryText="name" />


Display a form to attach comments to the current resource, as well as the list of existing comments (located in the replies collection). A comment is an ActivityPub Note and it is linked to the original resource with the inReplyOf property.

import { Show, SimpleShowLayout } from 'react-admin';
import { CommentsField } from '@semapps/activitypub-components';

const DocumentShow = props => {
const mentions = useMentions('Person');
return (
<Show {...props}>
<CommentsField userResource="Person" mentions={mentions} />
userResourceStringrequiredReact-Admin resource ID for users
labelString"Commentaires"The label to use for the field
placeholderString"Commencez à taper votre commentaire..."A placeholder to show before the user starts typing text.
mentionsObjectA tiptap suggestion object. If present, it allows to mention users.

To display the users' avatars, the fieldsMapping.image property must be defined in the data model of the user resource.


This component can be used like React-Admin ReferenceField. It fetches the collection associated with a resource, and display it in a list. Internally, it uses the CollectionList component.

import { Show, SimpleList } from 'react-admin';
import { ReferenceCollectionField } from '@semapps/activitypub-components';

export const ActorShow = props => (
<Show {...props}>
<ReferenceCollectionField reference="Actor" source="followers">
<SimpleList primaryText="name" />



This hook allows you to load data from an ActivityStreams Collection.

It takes as a parameter a full URL or a predicate. In the latter case, it will look for the properties of the logged-in actor. Typically, you could use useCollection("followers") to get the list of followers of the logged-in actor.

const {
items, // an array listing the items of the collection
loaded, // boolean that is false until the data is available
loading, // boolean that is true on mount, and false once the data was fetched
error, // error message if there was an error loading the collection
refetch, // a callback to refresh the data
url // url of the loaded collection (useful if only a predicate was passed)
} = useCollection('http://localhost:3000/alice/followers');


This hook allows you to fetch activities from the logged-in user's inbox.

import { useEffect } from 'react';
import { useInbox } from '@semapps/activitypub-components';

export const MyPage = props => {
const inbox = useInbox();
useEffect(() => {
inbox.fetch().then(activities => console.log(activities));
}, [inbox]);
return null;


This hook allows you to fetch activities from the logged-in user's outbox, and also to post new activities.

import { useEffect, useCallback } from 'react';
import { useOutbox, ACTIVITY_TYPES } from '@semapps/activitypub-components';

export const MyPage = props => {
const outbox = useOutbox();

useEffect(() => {
outbox.fetch().then(activities => console.log(activities));
}, [outbox]);

const follow = useCallback(
actorUrl => {{
actor: outbox.owner,
object: actorUrl,
to: actorUrl

return <button onClick={() => follow('http://localhost:3000/alice')}>Follow Alice</button>;


This hook allows you to get the nodeinfo schema of an instance.

import { useNodeinfo } from '@semapps/activitypub-components';

export const MyComponent = () => {
const nodeinfo = useNodeinfo('');
console.log('Nodeinfo schema: ', nodeinfo);
return null;

You can pass as a second argument the rel you want to fetch. By default, it is


This hook allows you to get an actor URL from its Webfinger account

import { useCallback } from 'react';
import { useWebfinger } from '@semapps/activitypub-components';

export const MyPage = props => {
const webfinger = useWebfinger();

const showActorUrl = useCallback(
actorAccount => {
webfinger.fetch(actorAccount).then(actorUrl => alert(actorUrl));

return <button onClick={() => showActorUrl('@alice@localhost:3000')}>Show Alice URL</button>;


Returns a tiptap suggestion object, allowing to mention users.

See the CommentsField component above for an example.