useCreateMirror
useCreateMirror
is a React Hook that lets you create a mirror to a publication using a Profile you own.
Don't know what a
mirror
is?Refer to the Lens Protocol documentation for mirror.
Good to know
Mirroring a mirror under the hood get's the orignal publication and applies the operation. Although Lens API (or smart contracts) allow to mirror a mirror, SDK is more strict and only post and comment can be mirrored.
const { execute, error, isPending } = useCreateMirror({ publisher });
Usage
Call the create
method from your event handler (quite likely attached to some button
).
Remember to gracefully handle errors
Don't just ignore the
error
returned from theuseCreateMirror
hook. These are a valid scenarios that can happen to your user while using your app.
import { Comment, Post, ProfileOwnedByMe, ReferencePolicy, useCreateMirror } from '@lens-protocol/react-web';
type MirrorButtonProps = {
publication: Post | Comment;
publisher: ProfileOwnedByMe;
};
function MirrorButton({ publication, publisher }: MirrorButtonProps) {
const { execute: create, isPending, error } = useCreateMirror({ publisher });
return (
<div>
<button
onClick={() =>
create({
publication,
profile,
reference: ReferencePolicy.ANYBODY,
})
}
disabled={isPending || publication.isMirroredByMe}
>
Mirror
</button>
{error && <p>Error: {error.message}</p>}
</div>
);
}
Reference
useCreateMirror()
useCreateMirror()
Parameters
publisher
this is the author profile of the new mirror. It must be a profile owned by the authenticatedSigner
(see useWalletLogin) as it is returned byuseActiveProfile
oruseProfilesOwnedByMe
hooks.
Returns
Returns an object with:
execute
: a function you can use to initiate the creation of a new comment.isPending
: a boolean notifying you when the operation is still in progress.- Optional
error
: any error that might occur in normal operating conditions will be returned via this property.
execute
function
execute
functionYou can use the execute
function to initiate the process that leads to a new mirror.
Parameters
It accepts a complex object with all the required configurations. The TS definition will help you to know what configuration to provide and when.
{
publication: PostFragment | CommentFragment,
profile: ProfileFragment,
reference: ReferencePolicy,
}
Returns
It returns a Promise<void>
that you can use to sync with the state of your component. For example, you can clear the content of any text input field when such Promise resolves.
Updated 2 months ago