CHANGELOG.md

12.0.4 Updates

Meeting Link changes

You can render custom meeting link action buttons

New usage;

import { MeetlingLink } from 'react-chat-elements'

<MeetlingLink
	actionButtons={[
		{
			onClickButton: test => {
				console.log(test)
			},
			Component: () => <div>Test</div>,
		},
		{
			onClickButton: test => {
				console.log(test)
			},
			Component: () => <div>Test</div>,
		},
	]}
	.
	.
	.
/>

In MessageList component usage;

import { MessageList } from 'react-chat-elements'

<MessageList
	actionButtons={[
		{
			onClickButton: test => {
				console.log(test)
			},
			Component: () => <div>Test</div>,
		},
		{
			onClickButton: test => {
				console.log(test)
			},
			Component: () => <div>Test</div>,
		},
	]}
	.
	.
	.
/>

12.0.0 Updates

typescript support

11.0.0 Updates

This update target to fix component ref broken problems

Fixed issues:

• #158
• #157
• #142

1. All react-chat-elements components turneded to function component for "ref" property problems.

2. In the Input component referance={...} instead of use ref={...}

3. 10.16.2 and before vesion usage

   Before usage: this.refs.input.clear();

   After 11.0.0 version usage is:

   import { Input } from 'react-chat-elements'
   
   <Input
   	ref='input'
   	placeholder="Type here..."
   	multiline={true}
   	.
   	.
   	.
   />

   New usage in class component: clearRef();

   import { Input } from 'react-chat-elements'
   let clearRef = () => {};
   this.inputReferance = React.createRef();
   
   <Input
   	referance={this.inputReferance}
   	clear={(clear) => clearRef = clear}
   	placeholder="Type here..."
   	multiline={true}
   	.
   	.
   	.
   />

   New usage in function component: clearRef();

   import { Input } from 'react-chat-elements'
   let clearRef = () => {};
   const inputReferance = React.useRef();
   
   <Input
   	referance={inputReferance}
   	clear={(clear) => clearRef = clear}
   	placeholder="Type here..."
   	multiline={true}
   	.
   	.
   	.
   />

4. In the MessageList component usage referance={...} instead of use ref={...}

   Class Component:

   import { MessageList } from 'react-chat-elements'
   this.messageList = React.createRef();
   
   <MessageList
   	referance={this.messageList}
   	className='message-list'
   	lockable={true}
   	toBottomHeight={'100%'}
   	dataSource={[
   		{
   			position: 'right',
   			type: 'text',
   			text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
   			date: new Date(),
   		},
   		.
   		.
   		.
   	]} />

   Function Component:

   import { MessageList } from 'react-chat-elements'
   const messageListReferance = React.useRef();
   
   <MessageList
   	referance={messageListReferance}
   	className='message-list'
   	lockable={true}
   	toBottomHeight={'100%'}
   	dataSource={[
   		{
   			position: 'right',
   			type: 'text',
   			text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
   			date: new Date(),
   		},
   		.
   		.
   		.
   	]} />