Messages React component represents Messages component.
<Messages>
<Message name="John" text="Hello, Kate!" type="received"></Message>
<Message name="Kate" text="Hi, John!" type="sent"></Message>
</Messages>
Renders to:
<div class="messages">
<div class="message message-received">
<div class="message-name">John</div>
<div class="message-text">Hello, Kate!</div>
</div>
<div class="message message-sent">
<div class="message-name">Kate</div>
<div class="message-text">Hi, John!</div>
</div>
</div>
Here is how it can be used in React component along with Message Bar:
const MessagesPageDefaultState = {
name: 'Vladimir',
messages: [{
day: 'Wendesday',
time: '13:34'
}, {
name: 'Vladimir',
text: 'How are you?',
label: 'Sent in good mood :)',
avatar: 'http://lorempixel.com/100/100/people/3',
date: 'Yesterday 13:34'
}, {
name: 'Jane',
text: 'I\'m good, thank you!',
type: 'received',
avatar: 'http://lorempixel.com/100/100/people/9',
date: 'Yesterday at 13:50'
}
]
}
class MessagesPage extends Component {
constructor() {
super();
this.state = {
name: MessagesPageDefaultState.name,
messages: MessagesPageDefaultState.messages
};
}
getMessage(props, index) {
let messageProps = {}
if (props) {
messageProps = props;
}
return (
<Message
{...messageProps}
key={index}
onClick={this.onClick.bind(this)}
onClickText={this.onTextClick.bind(this)}
onClickName={this.onNameClick.bind(this)}
onClickAvatar={this.onAvatarClick.bind(this)}>
</Message>
);
}
render() {
return (
<Page toolbarFixed>
<Navbar backLink="Back" title="Messages" sliding></Navbar>
<Subnavbar>
<input type="text" placeholder="Your name" defaultValue={this.state.name} onChange={this.onNameChange.bind(this)}/>
</Subnavbar>
<Messages>
{
this.state.messages.map((message, index) => {
return this.getMessage(message, index);
})
}
</Messages>
<Messagebar placeholder="Message" sendLink="Send" onSubmit={this.onSubmit.bind(this)} />
</Page>
);
}
onClick() {
console.log('click');
}
onTextClick() {
console.log('text click');
}
onNameClick() {
console.log('name click');
}
onAvatarClick() {
console.log('avatar click');
}
onSubmit(text, clear) {
if (text.trim().length === 0) return;
this.setState({
...this.state,
messages: [
...this.state.messages,
{
name: this.state.name,
avatar: 'http://lorempixel.com/100/100/people/3',
text: text,
date: (function () {
let now = new Date();
let hours = now.getHours();
let hoursString = hours < 10 ? `0${hours}` : `${hours}`;
let minutes = now.getMinutes();
let minutesString = minutes < 10 ? `0${minutes}` : `${minutes}`;
return `${hours}:${minutesString}`;
})()
}]
});
clear();
}
}
onNameChange(event) {
this.setState({
...this.state,
name: event.target.value
});
}
};
Prop | Type | Default | Description |
---|---|---|---|
<Messages> properties | |||
init | boolean | true | Initializes Messages component |
autoLayout | boolean | true | Enable Auto Layout to add all required additional classes (like "message-pic", "message-with-avatar", "message-with-tail", etc) to each message automatically |
newMessagesFirst | boolean | false | Enable if you want to use new messages on top, instead of having them on bottom |
scrollMessages | boolean | true | Enable/disable messages autoscrolling when adding new message |
scrollMessagesOnlyOnEdge | boolean | false | If enabled then messages autoscrolling will happen only when user is on top/bottom of the messages view |
messages | array | Array with initial messages. Each message in array should be presented as object with message parameters | |
<Message> properties | |||
type | string | "sent" | Message type: "sent" (default) or "received" |
text | string | Single message text | |
avatar | string | Single message user's avatar URL | |
name | string | Single message user's name | |
label | string | Single message label | |
date | string | Single message date | |
day | string | Conversation day | |
time | string | Conversation time | |
first | boolean | true | Defines that the message is first in the conversation |
last | boolean | true | Defines that the message is last in the conversation |
Event | Description |
---|---|
<Message> events | |
onClick | Event will be triggered when user clicks on message bubble |
onClickName | Event will be triggered when user clicks on message user's name |
onClickText | Event will be triggered when user clicks on message text |
onClickAvatar | Event will be triggered when user clicks on message user's avatar |