Skip to main content

FavoriteMaker API

The <FavoriteMaker> component renders a button that, when clicked, adds a specific item (specified via props) to the users favorites, or removes the item if the item is already in favorites. Using <FavoriteMaker> it's easy to build your own UI for working with favorites.

Here's a screenshot:

FavoriteMaker

Props

NameTypeRequiredDescription
idstringyesThe unique identifier for the favorite item. This must be consistent across restarts.
namestringyesThe name of the favorite item. This will be used for display in the FavoriteShell.
category"Workspace" | "Application"yesThe category of the favorite item. Currently only workspaces and launchable Finsemble applications can be favorited.
iconIconNoThe icon of the favorite item. This displays in the FavoriteShell. It defaults to use the initials of the name field as its content.

Usage

Suppose you wanted to create a component that, when clicked, added the workspace with id workspace1 to the users list of favorites. Here's the code:

import { FavoriteMaker } from "@finsemble/finsemble-core";
const Workspace1Favorite = () => {
return (
<div>
<div>Workspace 1</div>
<FavoriteMaker id="workspace1" name="Workspace 1" category="Workspace" icon={null} />
</div>
);
};