You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Before, we had internal repos for development and release
From now on, we will be developing here
Work done:
Fix config in pakage.json and rollup to support release process
Minor cleanup in README.md
Copy file name to clipboardExpand all lines: SAMPLES.md
+19-20Lines changed: 19 additions & 20 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -32,7 +32,7 @@ The minimum requirements for UIKit for React are:
32
32
33
33
### Implement Chat with App component
34
34
35
-
The `App` component is a collection of all UIKit components you need to implement chat. This is included in all core component samples, so be sure to set your own APP_ID, USER_ID, and NICKNAME in `const.js` in each to customize your sample. On the [CodeSandbox](https://codesandbox.io/s/1-1-using-sendbird-app-9xum5) link, you will see that the props of the `App` component refer to use the values of the correspondings of `const.js` for initialization.
35
+
The `App` component is a collection of all UIKit components you need to implement chat. This is included in all core component samples, so be sure to set your own APP_ID, USER_ID, and NICKNAME in `const.js` in each to customize your sample. On the [CodeSandbox](https://codesandbox.io/s/1-1-using-sendbird-app-9xum5) link, you will see that the props of the `App` component refer to use the values of the correspondings of `const.js` for initialization.
36
36
37
37
Try setting your own by downloading the Sendbird sample.
38
38
@@ -42,7 +42,7 @@ import { App as SendbirdApp } from 'sendbird-uikit'
42
42
43
43
### Import components to customize UIKit
44
44
45
-
Here is a list of the essential components that you need to import before you start customizing chat. Note that the names of the components are changed as shown in the code below.
45
+
Here is a list of the essential components that you need to import before you start customizing chat. Note that the names of the components are changed as shown in the code below.
46
46
47
47
Try [importing components on CodeSandbox](https://codesandbox.io/s/1-2-customization-basic-format-q4e6c).
48
48
@@ -54,15 +54,15 @@ import {
54
54
} from'sendbird-uikit'
55
55
```
56
56
57
-
### Referring to CodeSandbox
57
+
### Referring to CodeSandbox
58
58
59
59
Each CodeSandbox sample has `App.js` and `CustomizedApp.js` which operate based on the imported `const.js`. CodeSandbox is a code editor that provides an instant live preview. The preview has two buttons placed at the top center. If you click the left button, you will see unaltered `App.js`. If you click the right button, you will see the customized component from `CustomizedApp.js`, and any changes you make on them applied and rendered on the live preview.
60
60
61
-
If you would like to get a deeper understanding of how CodeSandbox works, refer to **CustomizedMessageItems**, **CustomizedHeader**, **CustomizedMessageInput**, and **CustomizedChannelPreviewItem** which you can find on corresponding CodeSandbox samples.
61
+
If you would like to get a deeper understanding of how CodeSandbox works, refer to **CustomizedMessageItems**, **CustomizedHeader**, **CustomizedMessageInput**, and **CustomizedChannelPreviewItem** which you can find on corresponding CodeSandbox samples.
62
62
63
63
<br />
64
64
65
-
## Getting Started
65
+
## Getting Started
66
66
67
67
This section explains what you need to know before testing the sample app.
68
68
@@ -86,15 +86,15 @@ Try your [message item on CodeSandbox](https://codesandbox.io/s/2-1-customizing-
86
86
>
87
87
```
88
88
89
-
> Note: You can try making your own customized message item by using `<CustomizedMessageItem />` on the CodeSandbox sample.
89
+
> Note: You can try making your own customized message item by using `<CustomizedMessageItem />` on the CodeSandbox sample.
90
90
91
91
### Message list params
92
92
93
-
The **queries.messageListParams** is an `instance` prop in the **channel** component which you can use to retrieve a list of messages by specifying the properties of `MessageListParams`.
93
+
The **queries.messageListParams** is an `instance` prop in the **channel** component which you can use to retrieve a list of messages by specifying the properties of `MessageListParams`.
94
94
95
95
Try your [message list params on CodeSandbox](https://codesandbox.io/s/2-2-customizing-messagelistparams-45573).
96
96
97
-
> Note: On CodeSandbox’s preview, only the messages you sent will be displayed.
97
+
> Note: On CodeSandbox’s preview, only the messages you sent will be displayed.
98
98
99
99
```javascript
100
100
// Pass arguments in JSON data input format to the query instance.
@@ -110,9 +110,9 @@ Try your [message list params on CodeSandbox](https://codesandbox.io/s/2-2-custo
110
110
>
111
111
```
112
112
113
-
### Message params
113
+
### Message params
114
114
115
-
The **onBeforeSendUserMessage**, **onBeforeSendFileMessage**, and **onBeforeUpdateUserMessage** are `callback function` props in the **channel** component. The first two execute additional operations for a user message and a file message respectively; the corresponding modified messages are returned through the **text** and the **file** arguments respectively. The **onBeforeUpdateUserMessage** executes additional operations for a user message before updating it.
115
+
The **onBeforeSendUserMessage**, **onBeforeSendFileMessage**, and **onBeforeUpdateUserMessage** are `callback function` props in the **channel** component. The first two execute additional operations for a user message and a file message respectively; the corresponding modified messages are returned through the **text** and the **file** arguments respectively. The **onBeforeUpdateUserMessage** executes additional operations for a user message before updating it.
116
116
117
117
Try your [message params on CodeSandbox](https://codesandbox.io/s/2-3-customizing-messageparams-phqii)
118
118
@@ -152,7 +152,7 @@ Try your [chat header on CodeSandbox](https://codesandbox.io/s/2-4-customizing-c
152
152
>
153
153
```
154
154
155
-
> Note: You can try making your own customized chat header item by using `<CustomizedHeader />` on the CodeSandbox sample.
155
+
> Note: You can try making your own customized chat header item by using `<CustomizedHeader />` on the CodeSandbox sample.
156
156
157
157
### Message input
158
158
@@ -169,11 +169,11 @@ Try your [message input on CodeSandbox](https://codesandbox.io/s/2-5-customizing
169
169
>
170
170
```
171
171
172
-
> Note: You can try making your own customized message input item by using `<CustomizedMessageInput />` on the CodeSandbox sample.
172
+
> Note: You can try making your own customized message input item by using `<CustomizedMessageInput />` on the CodeSandbox sample.
173
173
174
174
### Channel preview item
175
175
176
-
The **renderChannelPreview** is a `ReactElement` prop in the **ChannelList** component which allows you to customize channel preview by setting a function. This prop provides two arguments: **channel** and **onLeaveChannel**. The **channel** refers to a `GroupChannel` object which is a collection of properties necessary to render the current channel view. The **onLeaveChannel** has a callback function as an argument which can be implemented with custom code for events related to the corresponding user action.
176
+
The **renderChannelPreview** is a `ReactElement` prop in the **ChannelList** component which allows you to customize channel preview by setting a function. This prop provides two arguments: **channel** and **onLeaveChannel**. The **channel** refers to a `GroupChannel` object which is a collection of properties necessary to render the current channel view. The **onLeaveChannel** has a callback function as an argument which can be implemented with custom code for events related to the corresponding user action.
177
177
178
178
Try your [channel preview item on CodeSandbox](https://codesandbox.io/s/3-1-customizing-channelpreviewitem-ycsvs)
179
179
@@ -193,18 +193,17 @@ You can make your own customized channel preview item component in this file. Yo
193
193
functionCustomizedChannelPreviewItem(props) {
194
194
const { channel, onLeaveChannel } = props;
195
195
...
196
-
197
196
onLeaveChannel(channel);
198
197
}
199
198
```
200
199
201
-
> Note: You can try making your own customized channel preview item by using `<CustomizedMessageItem />` and using the **onLeaveChannel** function in the component on the CodeSandbox sample.
200
+
> Note: You can try making your own customized channel preview item by using `<CustomizedMessageItem />` and using the **onLeaveChannel** function in the component on the CodeSandbox sample.
202
201
203
202
### Channel list query
204
203
205
-
The **queries.channelListQuery** is an `instance` prop in the **ChannelList** component which filters channels by using its options.
204
+
The **queries.channelListQuery** is an `instance` prop in the **ChannelList** component which filters channels by using its options.
206
205
207
-
Try your [channel list query item on CodeSandbox](https://codesandbox.io/s/3-2-customizing-channellistquery-z2y89?file=)
206
+
Try your [channel list query item on CodeSandbox](https://codesandbox.io/s/3-2-customizing-channellistquery-z2y89?file=)
208
207
209
208
> Note: On the CodeSandbox’s preview, the empty channels that you see means that the channels are successfully created and there are no messages sent by users.
210
209
@@ -230,7 +229,7 @@ Find out more about `ChannelListQuery` and `ApplicationUserListQuery` on the [AP
230
229
231
230
The **onBeforeCreateChannel** is a prop of the **ChannelList** component which can be implemented with custom code for events related to the corresponding user actions.
232
231
233
-
Try your [channel param on CodeSandbox](https://codesandbox.io/s/3-3-customizing-channellist-sg9kx)
232
+
Try your [channel param on CodeSandbox](https://codesandbox.io/s/3-3-customizing-channellist-sg9kx)
234
233
235
234
> Note: you can create a channel using `GroupChannelParams`.
236
235
@@ -239,7 +238,7 @@ Try your [channel param on CodeSandbox](https://codesandbox.io/s/3-3-customizing
You can get an array of **selectedUsers** in a function argument. In order to complete an operation you intend to carry out with the function, you should return a `GroupchannelParams` object after specifying its properties.
241
+
You can get an array of **selectedUsers** in a function argument. In order to complete an operation you intend to carry out with the function, you should return a `GroupchannelParams` object after specifying its properties.
0 commit comments