Module: save-button
Table of contents
Functions
Functions
SaveButton
▸ SaveButton(props): ReactElement<any, string | JSXElementConstructor<any>>
SaveButton is a component that provides an interface for saving an image with associated metadata.
It uses the useSaveImage hook to manage the save state and trigger the save operation. The button's
appearance and label change based on whether the image has been saved or not.
Parameters
| Name | Type | Description |
|---|---|---|
props | Object | The properties passed to the SaveButton component. |
props.appId | string | An identifier for the application or context in which the image is saved. |
props.image | string | The URL or path to the image that needs to be saved. |
props.labels | undefined | Object | Labels for the button in different states, providing customization for the save and saved states. This component displays a button that, when clicked, will save the image and its metadata using the provided application identifier. It reflects the save state by changing its color and icon: a check icon and success color when saved, and a save icon with a neutral color when not yet saved. |
props.prompt | string | A description or metadata associated with the image to be saved. |
Returns
ReactElement<any, string | JSXElementConstructor<any>>
Example
<SaveButton
image="path/to/image.jpg"
prompt="A beautiful scenery"
appId="myApp123"
labels={{ save: "Custom Save", saved: "Custom Saved" }}
/>This setup will render a SaveButton that allows users to save an image with a custom label, changing upon saving.
Defined in
node_modules/@captn/joy/dist/esm/save-button/index.js:33