Captain is currently in ALPHA. We are happy to get your feedback
SDK
@captn/react
Modules
Use save Image

Module: use-save-image

Table of contents

Functions

Functions

useSaveImage

▸ useSaveImage(params): object

A React hook that provides functionality to save an image with an associated prompt to storage via IPC, and it also manages a 'saved' state that resets after a specified delay. This hook listens for a Ctrl+S key event to trigger the image saving process.

Parameters

NameTypeDefault valueDescription
paramsObjectundefinedThe parameters for configuring the hook.
params.appIdstringundefinedA unique identifier for the application or SDK instance, used to configure the underlying useSDK hook for IPC communication.
params.imagestringundefinedThe base64 encoded string of the image to be saved.
params.promptstringundefinedThe description or prompt associated with the image. This is used as metadata or naming context in the storage.
params.resetDelayundefined | number2000The delay in milliseconds after which the 'saved' state resets to false. Default is 2000 milliseconds.

Returns

object

An object containing:

  • saved: A boolean state that indicates whether the image has been successfully saved. This state auto-resets after the specified delay.
  • save: A function that, when executed, saves the current image to storage using IPC mechanisms and sets the saved state to true.

Example

const { saved, save } = useSaveImage({
  image: 'data:image/png;base64,...',
  prompt: 'A beautiful landscape',
  appId: 'myAppId',
});
if (saved) {
  console.log('Image has been saved!');
}
 
// The save function can be bound to a button click as well
<button onClick={save}>Save Image</button>

Remarks

  • The hook uses useSDK for sending IPC messages to perform file operations, ensuring that the image data is correctly written to the desired storage location.
  • The saved state provides feedback that can be used to alert users or trigger UI updates upon successful saving of the image.
  • Integration with useResettableState allows the saved state to automatically reset, making it suitable for transient notifications or indicators.
  • The hook also sets up a global keyboard listener for the Ctrl+S key combination to provide a quick save functionality, enhancing usability for keyboard-heavy workflows.

Defined in

react/dist/esm/use-save-image/index.js:49

Use Resettable StateUse Sdk