Skip to content

Commit b0d4c7e

Browse files
HoonBaekHoonBaek
authored
Merge pull request #2 from sendbird/hotfix/custom-sample-list-md
Move custom smaples to a new md file
2 parents 3c13aba + 481fa65 commit b0d4c7e

File tree

2 files changed

+261
-264
lines changed

2 files changed

+261
-264
lines changed

‎README.md‎

Lines changed: 0 additions & 264 deletions
Original file line numberDiff line numberDiff line change
@@ -91,267 +91,3 @@ npm run lint
9191
3. Add the following line to './rollup.config.js' `input`
9292
`NewComponent: 'src/location/of/NewComponent',`
9393

94-
-----
95-
96-
# Sendbird UIKit for React samples
97-
![Platform](https://img.shields.io/badge/platform-JAVASCRIPT-orange.svg)
98-
![Languages](https://img.shields.io/badge/language-JAVASCRIPT-orange.svg)
99-
[![npm](https://img.shields.io/npm/v/sendbird.svg?style=popout&colorB=red)](https://www.npmjs.com/package/sendbird)
100-
101-
Sendbird UIKit for React is a development kit with an user interface that enables an easy and fast integration of standard chat features into new or existing client apps. Here are three UIKit samples for React in the submodules.
102-
103-
* **simple-react-app** is a chat app which is comprised of UIKit’s most essential components.
104-
* **composed-react-app** is a chat app which contains various smart components.
105-
* **custom-react-app** is a chat app which contains customizable sample codes for **Message**, **ChannelPreview**, and **UserList**.
106-
107-
### More about Sendbird UIKit for React
108-
109-
Find out more about Sendbird UIKit for React at [UIKit for React doc](https://sendbird.com/docs/uikit/v1/javascript/getting-started/about-uikit). If you need any help in resolving any issues or have questions, visit [our community](https://community.sendbird.com).
110-
111-
<br />
112-
113-
## UIKit components and ways to customize
114-
These samples are here to help you better understand UIKit for React by going over the core components and ways to customize. On each core component sample, there is an attached CodeSandbox link in which you can see the sample codes and alter them to see how the changes are rendered.
115-
116-
<br />
117-
118-
## Before getting started
119-
120-
This section shows you what you need for testing Sendbird UIKit sample app for React sample app.
121-
122-
### Requirements
123-
124-
The minimum requirements for UIKit for React are:
125-
126-
- React 16.8.0+
127-
- React DOM 16.8.0+
128-
- Sendbird Chat SDK for JavaScript 3.0.115+
129-
- css-vars-ponyfill 2.3.2
130-
- date-fns 2.16.1
131-
132-
### Implement Chat with App component
133-
134-
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.
135-
136-
Try setting your own by downloading the Sendbird sample.
137-
138-
```javascript
139-
import { App as SendbirdApp } from 'sendbird-uikit'
140-
```
141-
142-
### Import components to customize UIKit
143-
144-
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.
145-
146-
Try [importing components on CodeSandbox](https://codesandbox.io/s/1-2-customization-basic-format-q4e6c).
147-
148-
```javascript
149-
import {
150-
Channel as SBConversation,
151-
ChannelList as SBChannelList,
152-
ChannelSettings as SBChannelSettings,
153-
} from 'sendbird-uikit'
154-
```
155-
156-
### Referring to CodeSandbox
157-
158-
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.
159-
160-
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.
161-
162-
<br />
163-
164-
## Getting Started
165-
166-
This section explains what you need to know before testing the sample app.
167-
168-
### Message item
169-
170-
The **renderChatItem** is a `ReactElement` prop in the Channel component which you can use to customize `message` by setting a function. This prop provides three arguments: **message**, **onUpdateMessage**, and **onDeleteMessage**. The **message** represents an already sent or received message of an `BaseMessage` object; **onUpdateMessage** and **onDeleteMessage** are callback functions which you can implement with custom code for events related to the corresponding user actions.
171-
172-
Try your [message item on CodeSandbox](https://codesandbox.io/s/2-1-customizing-messageitem-0nop5?file=).
173-
174-
```javascript
175-
<Channel
176-
renderChatItem={({
177-
message,
178-
onDeleteMessage,
179-
onUpdateMessage,
180-
onResendMessage,
181-
emojiContainer,
182-
}) => {
183-
<CustomizedMessageItem />
184-
}}
185-
>
186-
```
187-
188-
> Note: You can try making your own customized message item by using `<CustomizedMessageItem />` on the CodeSandbox sample.
189-
190-
### Message list params
191-
192-
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`.
193-
194-
Try your [message list params on CodeSandbox](https://codesandbox.io/s/2-2-customizing-messagelistparams-45573).
195-
196-
> Note: On CodeSandbox’s preview, only the messages you sent will be displayed.
197-
198-
```javascript
199-
// Pass arguments in JSON data input format to the query instance.
200-
<Channel
201-
queries={{
202-
messageListParams: {
203-
senderUserIds: [USER_ID],
204-
prevResultSize: 30,
205-
includeReplies: false,
206-
includeReactions: false
207-
}
208-
}}
209-
>
210-
```
211-
212-
### Message params
213-
214-
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.
215-
216-
Try your [message params on CodeSandbox](https://codesandbox.io/s/2-3-customizing-messageparams-phqii)
217-
218-
> Note: On the CodeSandbox’s preview, you can send or update a message in highlight.
219-
220-
```javascript
221-
<Channel
222-
onBeforeSendUserMessage={(text) => {}}
223-
onBeforeSendFileMessage={(file) => {}}
224-
onBeforeUpdateUserMessage={handleUpdateUserMessage}
225-
>
226-
```
227-
228-
In order to complete an operation you intend to carry out with each function, you should return `UserMessageParams` and `FileMessageParams` objects.
229-
230-
```javascript
231-
const handleUpdateUserMessage = (text) => {
232-
const userMessageParams = new sdk.UserMessageParams();
233-
userMessageParams.message = text;
234-
return userMessageParams;
235-
}
236-
```
237-
238-
Find out more about `UserMessageParams` and `FileMessageParams` on the [API reference of Sendbird Chat SDK for JavaScript](https://sendbird.github.io/core-sdk-javascript/module-model_params_userMessageParams-UserMessageParams.html).
239-
240-
### Chat header
241-
242-
The **renderChatHeader** is a `ReactElement` prop in the **channel** component which you can use to customize the header of `channel` by setting a function. This prop provides two arguments: **channel** and **user**. The channel refers to a `GroupChannel` object which is a collection of properties necessary to render the current channel view. The **user** refers to a `User` object which represents the current user.
243-
244-
Try your [chat header on CodeSandbox](https://codesandbox.io/s/2-4-customizing-chatheader-voi0z)
245-
246-
```javascript
247-
<Channel
248-
renderChatHeader={({ channel, user }) => (
249-
<CustomizedHeader />
250-
)}
251-
>
252-
```
253-
254-
> Note: You can try making your own customized chat header item by using `<CustomizedHeader />` on the CodeSandbox sample.
255-
256-
### Message input
257-
258-
The **renderMessageInput** is a `ReactElement` prop in the **Channel** component which allows you to customize the message input by setting a function. This prop provides three arguments: **channel**, **user**, and **disabled**. The **channel** refers to a `GroupChannel` object which is a collection of properties necessary to render the current channel view. The **user** refers to a `User` object which represents the current user. The **disabled** refers to whether to enable the message input box or not.
259-
260-
Try your [message input on CodeSandbox](https://codesandbox.io/s/2-5-customizing-chatinput-wgi9d)
261-
262-
263-
```javascript
264-
<Channel
265-
renderMessageInput={({ channel, user, disabled }) => (
266-
<CustomizedMessageInput />
267-
)}
268-
>
269-
```
270-
271-
> Note: You can try making your own customized message input item by using `<CustomizedMessageInput />` on the CodeSandbox sample.
272-
273-
### Channel preview item
274-
275-
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.
276-
277-
Try your [channel preview item on CodeSandbox](https://codesandbox.io/s/3-1-customizing-channelpreviewitem-ycsvs)
278-
279-
```javascript
280-
<ChannelList
281-
renderChannelPreview={({ channel, onLeaveChannel }) => (
282-
<CustomizedChannelPreviewItem />
283-
)}
284-
>
285-
```
286-
287-
#### CustomizedChannelPreviewItem.js
288-
289-
You can make your own customized channel preview item component in this file. You can use the **onLeaveChannel** function in the component.
290-
291-
```javascript
292-
function CustomizedChannelPreviewItem(props) {
293-
const { channel, onLeaveChannel } = props;
294-
...
295-
296-
onLeaveChannel(channel);
297-
}
298-
```
299-
300-
> 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.
301-
302-
### Channel list query
303-
304-
The **queries.channelListQuery** is an `instance` prop in the **ChannelList** component which filters channels by using its options.
305-
306-
Try your [channel list query item on CodeSandbox](https://codesandbox.io/s/3-2-customizing-channellistquery-z2y89?file=)
307-
308-
> 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.
309-
310-
```javascript
311-
// Pass arguments in JSON data input format to the query instance.
312-
<ChannelList
313-
queries={{
314-
channelListQuery: {
315-
includeEmpty: true,
316-
limit: 50,
317-
order: "chronological"
318-
},
319-
applicationUserListQuery: {
320-
limit: 50,
321-
}
322-
}}
323-
>
324-
```
325-
326-
Find out more about `ChannelListQuery` and `ApplicationUserListQuery` on the [API reference of Sendbird Chat SDK for JavaScript](https://sendbird.github.io/core-sdk-javascript/module-model_query_groupChannelListQuery-GroupChannelListQuery.html).
327-
328-
### Channel params
329-
330-
The **onBeforeCreateChannel** is a prop of the **ChannelList** component which can be implemented with custom code for events related to the corresponding user actions.
331-
332-
Try your [channel param on CodeSandbox](https://codesandbox.io/s/3-3-customizing-channellist-sg9kx)
333-
334-
> Note: you can create a channel using `GroupChannelParams`.
335-
336-
```javascript
337-
<ChannelList
338-
onBeforeCreateChannel={handleOnBeforeCreateChannel}
339-
>
340-
```
341-
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.
342-
343-
```javascript
344-
const handleOnBeforeCreateChannel = (selectedUsers) => {
345-
const channelParams = new sdk.GroupChannelParams();
346-
channelParams.addUserIds(selectedUsers);
347-
channelParams.name = "Hello Sendbird!!";
348-
channelParams.overUrl = null;
349-
channelParams.coverImage = null;
350-
channelParams.customType = HIGHLIGHT;
351-
352-
return channelParams;
353-
}
354-
```
355-
356-
Find out more about `GroupChannelParams` on the [API reference of Sendbird Chat SDK for JavaScript](https://sendbird.github.io/core-sdk-javascript/module-model_params_groupChannelParams-GroupChannelParams.html).
357-

0 commit comments

Comments
 (0)