bitpro가 원문에서 글자만 모은 내용이에요. 표·그림·수식은 빠지거나 깨질 수 있어요. 전체 17쪽 중 5쪽
build/react-sdk/api/useCreateGdm
A hook that allows you to create a new group direct message (GDM).
## Imports
```ts theme={null}
import { useCreateGdm } from '@towns-protocol/react-sdk'
```
## Definition
```ts theme={null}
function useCreateGdm(
config?: ActionConfig<Gdms["createGDM"]>,
): {
data: {
streamId: string;
} | undefined;
error: Error | undefined;
isPending: boolean;
isSuccess: boolean;
isError: boolean;
createGDM: (userIds: string[], channelProperties?: EncryptedData | undefined, streamSettings?: {
disableMiniblockCreation: boolean;
lightStream: boolean;
} | undefined) => Promise<{
streamId: string;
}>;
}
```
**Source:** [useCreateGdm](https://github.com/towns-protocol/towns/blob/main/packages/react-sdk/src/useCreateGdm.ts)
## Parameters
### config
* **Type:** `ActionConfig<Gdms["createGDM"]>`
* **Optional**
The action config.
## Return Type
An object containing the `createGDM` action and the rest of the action result.
```ts theme={null}
{
data: {
streamId: string;
} | undefined;
error: Error | undefined;
isPending: boolean;
isSuccess: boolean;
isError: boolean;
createGDM: (userIds: string[], channelProperties?: EncryptedData | undefined, streamSettings?: {
disableMiniblockCreation: boolean;
lightStream: boolean;
} | undefined) => Promise<{
streamId: string;
}>;
}
```
# useCreateSpace
Source: https://docs.towns.com/build/react-sdk/api/useCreateSpace
Hook to create a space.
## Imports
```ts theme={null}
import { useCreateSpace } from '@towns-protocol/react-sdk'
```
## Definition
```ts theme={null}
function useCreateSpace(
config?: ActionConfig<Spaces["createSpace"]>,
): {
data: {
spaceId: string;
defaultChannelId: string;
} | undefined;
error: Error | undefined;
isPending: boolean;
isSuccess: boolean;
isError: boolean;
createSpace: (params: Partial<Omit<CreateSpaceParams, "spaceName">> & {
spaceName: string;
}, signer: Signer) => Promise<{
spaceId: string;
defaultChannelId: string;
}>;
}
```
**Source:** [useCreateSpace](https://github.com/towns-protocol/towns/blob/main/packages/react-sdk/src/useCreateSpace.ts)
## Parameters
### config
* **Type:** `ActionConfig<Spaces["createSpace"]>`
* **Optional**
Configuration options for the action.
## Return Type
The `createSpace` action and its loading state.
```ts theme={null}
{
data: {
spaceId: string;
defaultChannelId: string;
} | undefined;
error: Error | undefined;
isPending: boolean;
isSuccess: boolean;
isError: boolean;
createSpace: (params: Partial<Omit<CreateSpaceParams, "spaceName">> & {
spaceName: string;
}, signer: Signer) => Promise<{
spaceId: string;
defaultChannelId: string;
}>;
}
```
# useDm
Source: https://docs.towns.com/build/react-sdk/api/useDm
Hook to get the data of a DM. You can use this hook to get DM metadata and if the user has joined the DM.
## Imports
```ts theme={null}
import { useDm } from '@towns-protocol/react-sdk'
```
## Definition
```ts theme={null}
function useDm(
streamId: string,
config?: ObservableConfig.FromData<DmModel>,
): ObservableValue<DmModel>
```
**Source:** [useDm](https://github.com/towns-protocol/towns/blob/main/packages/react-sdk/src/useDm.ts)
## Parameters
### streamId
* **Type:** `string`
The id of the DM to get the data of.
### config
* **Type:** `ObservableConfig.FromData<DmModel>`
* **Optional**
Configuration options for the observable.
## Return Type
The DmModel of the DM.
```ts theme={null}
ObservableValue<DmModel>
```
# useGdm
Source: https://docs.towns.com/build/react-sdk/api/useGdm
Hook to get the data of a Group DM. You can use this hook to get Group DM metadata and if the user has joined the Group DM.
## Imports
```ts theme={null}
import { useGdm } from '@towns-protocol/react-sdk'
```
## Definition
```ts theme={null}
function useGdm(
streamId: string,
config?: ObservableConfig.FromData<GdmModel>,
): ObservableValue<GdmModel>
```
**Source:** [useGdm](https://github.com/towns-protocol/towns/blob/main/packages/react-sdk/src/useGdm.ts)
## Parameters
### streamId
* **Type:** `string`
The id of the Group DM to get the data of.
### config
* **Type:** `ObservableConfig.FromData<GdmModel>`
* **Optional**
Configuration options for the observable.
## Return Type
The GdmModel of the Group DM.
```ts theme={null}
ObservableValue<GdmModel>
```
# useJoinSpace
Source: https://docs.towns.com/build/react-sdk/api/useJoinSpace
Hook to join a space.
## Imports
```ts theme={null}
import { useJoinSpace } from '@towns-protocol/react-sdk'
```
## Definition
```ts theme={null}
function useJoinSpace(
config?: ActionConfig<Spaces["joinSpace"]>,
): {
data: void | undefined;
error: Error | undefined;
isPending: boolean;
isSuccess: boolean;
isError: boolean;
joinSpace: (spaceId: string, signer: Signer, opts?: {
skipMintMembership?: boolean;
} | undefined) => Promise<void>;
}
```
**Source:** [useJoinSpace](https://github.com/towns-protocol/towns/blob/main/packages/react-sdk/src/useJoinSpace.ts)
## Parameters
### config
* **Type:** `ActionConfig<Spaces["joinSpace"]>`
* **Optional**
Configuration options for the action.
## Return Type
The joinSpace action and the status of the action.
```ts theme={null}
{
data: void | undefined;
error: Error | undefined;
isPending: boolean;
isSuccess: boolean;
isError: boolean;
joinSpace: (spaceId: string, signer: Signer, opts?: {
skipMintMembership?: boolean;
} | undefined) => Promise<void>;
}
```
# useMember
Source: https://docs.towns.com/build/react-sdk/api/useMember
Hook to get data from a specific member of a Space, GDM, Channel, or DM.
## Imports
```ts theme={null}
import { useMember } from '@towns-protocol/react-sdk'
```
## Definition
```ts theme={null}
function useMember(
props: {
streamId: string;
userId: string;
},
config?: ObservableConfig.FromObservable<Member>,
): {
error: Error | undefined;
status: "loading" | "loaded" | "error";
isLoading: boolean;
isError: boolean;
isLoaded: boolean;
userId: string;
streamId: string;
initialized: boolean;
username: string;
isUsernameConfirmed: boolean;
isUsernameEncrypted: boolean;
displayName: string;
isDisplayNameEncrypted: boolean | undefined;
ensAddress: string | undefined;
nft: NftModel | undefined;
membership: MembershipOp | undefined;
}
```
**Source:** [useMember](https://github.com/towns-protocol/towns/blob/main/packages/react-sdk/src/useMember.ts)
## Parameters
### props
* **Type:** `{
streamId: string;
userId: string;
}`
The streamId and userId of the member to get data from.
### config
* **Type:** `ObservableConfig.FromObservable<Member>`
* **Optional**
Configuration options for the observable.
## Return Type
The Member data.
```ts theme={null}
{
error: Error | undefined;
status: "loading" | "loaded" | "error";
isLoading: boolean;
isError: boolean;
isLoaded: boolean;
userId: string;
streamId: string;
initialized: boolean;
username: string;
isUsernameConfirmed: boolean;
isUsernameEncrypted: boolean;
displayName: string;
isDisplayNameEncrypted: boolean | undefined;
ensAddress: string | undefined;
nft: NftModel | undefined;
membership: MembershipOp | undefined;
}
```
# useMemberList
Source: https://docs.towns.com/build/react-sdk/api/useMemberList
Hook to get the members userIds of a Space, GDM, Channel, or DM. Used with useMember to get data from a specific member.
## Imports
```ts theme={null}
import { useMemberList } from '@towns-protocol/react-sdk'
```
## Definition
```ts theme={null}
function useMemberList(
streamId: string,
config?: ObservableConfig.FromData<MembersModel>,
): ObservableValue<MembersModel>
```
**Source:** [useMemberList](https://github.com/towns-protocol/towns/blob/main/packages/react-sdk/src/useMemberList.ts)
## Parameters
### streamId
* **Type:** `string`
The id of the stream to get the members of.
### config
* **Type:** `ObservableConfig.FromData<MembersModel>`
* **Optional**
Configuration options for the observable.
## Return Type
The MembersModel of the stream, containing the userIds of the members.
```ts theme={null}
ObservableValue<MembersModel>
```
# useMyMember
Source: https://docs.towns.com/build/react-sdk/api/useMyMember
Hook to get the data of the current user in a stream.
## Imports
```ts theme={null}
import { useMyMember } from '@towns-protocol/react-sdk'
```
## Definition
```ts theme={null}
function useMyMember(
streamId: string,
config?: ObservableConfig.FromObservable<Member>,
): {
id: string;
userId: string;
streamId: string;
initialized: boolean;
username: string;
isUsernameConfirmed: boolean;
isUsernameEncrypted: boolean;
displayName: string;
isDisplayNameEncrypted?: boolean;
ensAddress?: string;
nft?: NftModel;
membership?: MembershipOp;
appAddress?: string;
}
```
**Source:** [useMyMember](https://github.com/towns-protocol/towns/blob/main/packages/react-sdk/src/useMyMember.ts)
## Parameters
### streamId
* **Type:** `string`
The id of the stream to get the current user of.
### config
* **Type:** `ObservableConfig.FromObservable<Member>`
* **Optional**
Configuration options for the observable.
## Return Type
The MemberModel of the current user.
```ts theme={null}
{
id: string;
userId: string;
streamId: string;
initialized: boolean;
username: string;
isUsernameConfirmed: boolean;
isUsernameEncrypted: boolean;
displayName: string;
isDisplayNameEncrypted?: boolean;
ensAddress?: string;
nft?: NftModel;
membership?: MembershipOp;
appAddress?: string;
}
```
# useObservable
Source: https://docs.towns.com/build/react-sdk/api/useObservable
This hook subscribes to an observable and returns the value of the observable.
## Imports
```ts theme={null}
import { useObservable } from '@towns-protocol/react-sdk'
```
## Definition
```ts theme={null}
function useObservable<Model, Data>(
observable: Observable<Model>,
config?: ObservableConfig.FromData<Model>,
): ObservableValue<Data>
```
**Source:** [useObservable](https://github.com/towns-protocol/towns/blob/main/packages/react-sdk/src/useObservable.ts)
## Parameters
### observable
* **Type:** `Observable<Model>`
The observable to subscribe to.
### config
* **Type:** `ObservableConfig.FromData<Model>`
* **Optional**
Configuration options for the observable.
#### config.fireImmediately
* **Type:** `boolean`
* **Optional**
Trigger the update immediately, without waiting for the first update.
#### config.onError
* **Type:** `(error: Error) => void`
* **Optional**
Callback function to be called when an error occurs.
#### config.onUpdate
* **Type:** `(data: Data) => void`
* **Optional**
Callback function to be called when the data is updated.
## Return Type
The value of the observable.
```ts theme={null}
ObservableValue<Data>
```
# useReactions
Source: https://docs.towns.com/build/react-sdk/api/useReactions
Hook to get the reactions of a specific stream.
## Imports
```ts theme={null}
import { useReactions } from '@towns-protocol/react-sdk'
```
## Definition
```ts theme={null}
function useReactions(
streamId: string,
config?: ObservableConfig.FromData<Record<string, MessageReactions>>,
): ObservableValue<Record<string, MessageReactions>>
```
**Source:** [useReactions](https://github.com/towns-protocol/towns/blob/main/packages/react-sdk/src/useReactions.ts)
## Parameters
### streamId
* **Type:** `string`
The id of the stream to get the reactions of.
### config
* **Type:** `ObservableConfig.FromData<Record<string, MessageReactions>>`
* **Optional**
Configuration options for the observable.
## Return Type
The reactions of the stream as a map from the message eventId to the reaction.
```ts theme={null}
ObservableValue<Record<string, MessageReactions>>
```
# useRedact
Source: https://docs.towns.com/build/react-sdk/api/useRedact
Hook to redact your own message in a channel stream.
## Imports
```ts theme={null}
import { useRedact } from '@towns-protocol/react-sdk'
```
## Examples
### Redact a message
You can use `redact` to redact a message in a stream.
```ts theme={null}
import { useRedact } from '@towns-protocol/react-sdk'
const { redact } = useRedact(streamId)
redact({ eventId: messageEventId })
```
### Redact a message reaction
You can also use `redact` to redact a message reaction in a stream.
```ts theme={null}
import { useRedact } from '@towns-protocol/react-sdk'
const { redact } = useRedact(streamId)
redact({ eventId: reactionEventId })
```
## Definition
```ts theme={null}
function useRedact(
streamId: string,
config?: ActionConfig<Channel["redact"]>,
): {
data: {
eventId: string;
} | undefined;
error: Error | undefined;
isPending: boolean;
isSuccess: boolean;
isError: boolean;
redact: (eventId: string, reason?: string | undefined) => Promise<{
eventId: string;
}>;
}
```
**Source:** [useRedact](https://github.com/towns-protocol/towns/blob/main/packages/react-sdk/src/useRedact.ts)
## Parameters
### streamId
* **Type:** `string`
The id of the stream to redact the message in.
### config
* **Type:** `ActionConfig<Channel["redact"]>`
* **Optional**
Configuration options for the action.
## Return Type
The `redact` action and its loading state.
```ts theme={null}
{
data: {
eventId: string;
} | undefined;
error: Error | undefined;
isPending: boolean;
isSuccess: boolean;
isError: boolean;
redact: (eventId: string, reason?: string | undefined) => Promise<{
eventId: string;
}>;
}
```
# useScrollback
Source: https://docs.towns.com/build/react-sdk/api/useScrollback
Hook to get the scrollback action for a stream.
Scrollback is the action of getting miniblocks from a stream before a certain point in time. Getting miniblocks means that new events that are possibly new messages, reactions and so on are fetched.
## Imports
```ts theme={null}
import { useScrollback } from '@towns-protocol/react-sdk'
```
## Definition
```ts theme={null}
function useScrollback(
streamId: string,
config?: ActionConfig<MessageTimeline["scrollback"]>,
): {
data: {
terminus: boolean;
fromInclusiveMiniblockNum: bigint;
} | undefined;
error: Error | undefined;
isPending: boolean;
isSuccess: boolean;
isError: boolean;
scrollback: () => Promise<{
terminus: boolean;
fromInclusiveMiniblockNum: bigint;
}>;
}
```
**Source:** [useScrollback](https://github.com/towns-protocol/towns/blob/main/packages/react-sdk/src/useScrollback.ts)
## Parameters
### streamId
* **Type:** `string`
The id of the stream to get the scrollback action for.
### config
* **Type:** `ActionConfig<MessageTimeline["scrollback"]>`
* **Optional**
Configuration options for the action.
## Return Type
The `scrollback` action and its loading state.
```ts theme={null}
{
data: {
terminus: boolean;
fromInclusiveMiniblockNum: bigint;
} | undefined;
error: Error | undefined;
isPending: boolean;
isSuccess: boolean;
isError: boolean;
scrollback: () => Promise<{
terminus: boolean;
fromInclusiveMiniblockNum: bigint;
}>;
}
```
# useSendMessage
Source: https://docs.towns.com/build/react-sdk/api/useSendMessage
Hook to send a message to a stream. Can be used to send a message to a channel or a dm/group dm.
## Imports
```ts theme={null}
import { useSendMessage } from '@towns-protocol/react-sdk'
```
## Definition
```ts theme={null}
function useSendMessage(
streamId: string,
config?: ActionConfig<Channel["sendMessage"]>,
): {
data: {
eventId: string;
} | undefined;
error: Error | undefined;
isPending: boolean;
isSuccess: boolean;
isError: boolean;
sendMessage: (message: string, options?: {
threadId?: string;
replyId?: string;
mentions?: PlainMessage<ChannelMessage.Post.Mention>[];
attachments?: PlainMessage<ChannelMessage.Post.Attachment>[];
appClientAddress?: string;
} | undefined) => Promise<{
eventId: string;
}>;
}
```
**Source:** [useSendMessage](https://github.com/towns-protocol/towns/blob/main/packages/react-sdk/src/useSendMessage.ts)
## Parameters
### streamId
* **Type:** `string`
The id of the stream to send the message to.
### config
* **Type:** `ActionConfig<Channel["sendMessage"]>`
* **Optional**
Configuration options for the action.
## Return Type
The sendMessage action and the status of the action.
```ts theme={null}
{
data: {
eventId: string;
} | undefined;
error: Error | undefined;
isPending: boolean;
isSuccess: boolean;
isError: boolean;
sendMessage: (message: string, options?: {
threadId?: string;
replyId?: string;
mentions?: PlainMessage<ChannelMessage.Post.Mention>[];
attachments?: PlainMessage<ChannelMessage.Post.Attachment>[];
appClientAddress?: string;
} | undefined) => Promise<{
eventId: string;
}>;
}
```
# useSendReaction
Source: https://docs.towns.com/build/react-sdk/api/useSendReaction
Hook to send a reaction to a message in a stream.
Reaction can be any string value, including emojis.
## Imports
```ts theme={null}
import { useSendReaction } from '@towns-protocol/react-sdk'
```
## Examples
```ts theme={null}
import { useSendReaction } from '@towns-protocol/react-sdk'
const { sendReaction } = useSendReaction('stream-id')
sendReaction(messageEventId, '🔥')
```
## Definition
```ts theme={null}
function useSendReaction(
streamId: string,
config?: ActionConfig<Channel["sendReaction"]>,
): {
data: {
eventId: string;
} | undefined;
error: Error | undefined;
isPending: boolean;
isSuccess: boolean;
isError: boolean;
sendReaction: (refEventId: string, reaction: string) => Promise<{
eventId: string;
}>;
}
```
**Source:** [useSendReaction](https://github.com/towns-protocol/towns/blob/main/packages/react-sdk/src/useSendReaction.ts)
## Parameters
### streamId
* **Type:** `string`
The id of the stream to send the reaction to.
### config
* **Type:** `ActionConfig<Channel["sendReaction"]>`
* **Optional**
Configuration options for the action.
## Return Type
The `sendReaction` action and its loading state.
```ts theme={null}
{
data: {
eventId: string;
} | undefined;
error: Error | undefined;
isPending: boolean;
isSuccess: boolean;
isError: boolean;
sendReaction: (refEventId: string, reaction: string) => Promise<{
eventId: string;
}>;
}
```
# useSetDisplayName
Source: https://docs.towns.com/build/react-sdk/api/useSetDisplayName
Hook to set the display name of the current user in a stream.
## Imports
```ts theme={null}
import { useSetDisplayName } from '@towns-protocol/react-sdk'
```
## Definition
```ts theme={null}
function useSetDisplayName(
streamId: string,
config?: ActionConfig<Myself["setDisplayName"]>,
): {
data: void | undefined;
error: Error | undefined;
isPending: boolean;
isSuccess: boolean;
isError: boolean;
setDisplayName: (displayName: string) => Promise<void>;
}
```
**Source:** [useSetDisplayName](https://github.com/towns-protocol/towns/blob/main/packages/react-sdk/src/useMyMember.ts)
## Parameters
### streamId
* **Type:** `string`
The id of the stream to set the display name of.
### config
* **Type:** `ActionConfig<Myself["setDisplayName"]>`
* **Optional**
Configuration options for the action.
## Return Type
The `setDisplayName` action and its loading state.
```ts theme={null}
{
data: void | undefined;
error: Error | undefined;
isPending: boolean;
isSuccess: boolean;
isError: boolean;
setDisplayName: (displayName: string) => Promise<void>;
}
```
# useSetEnsAddress
Source: https://docs.towns.com/build/react-sdk/api/useSetEnsAddress
Hook to set the ENS address of the current user in a stream. You should be validating if the ENS address belongs to the user before setting it.
## Imports
```ts theme={null}
import { useSetEnsAddress } from '@towns-protocol/react-sdk'
```
## Definition
```ts theme={null}
function useSetEnsAddress(
streamId: string,
config?: ActionConfig<Myself["setEnsAddress"]>,
): {
data: void | undefined;
error: Error | undefined;
isPending: boolean;
isSuccess: boolean;
isError: boolean;
setEnsAddress: (ensAddress: `0x${string}`) => Promise<void>;
}
```
**Source:** [useSetEnsAddress](https://github.com/towns-proto프로젝트로 돌아가기
