react-chat-elements
react-chat-elements copied to clipboard
Added custom buttons option to MessageBox
Basically, I did two things in this fork:
- I made the positions of the MessageBox buttons (reply, delete, forward) dynamic using css. This now allows any number of buttons to be displayed without irregular spacing between them. There is now a wrapper (
rce-mbox-btn-list
) for all buttons. The buttons themselves are also wrapped again (rce-mbox-btn-container
), so they are displayed next to each other in one line. - I added the option to add ReactNodes as customButtons array to the MessageBox. These will then be displayed behind the other buttons set. No additional style is applied to them, as I wanted to have a customizable solution. But we can also think about solving it in a different way.
.rce-mbox-btn-list-right {
left: -12px;
transform: translateX(-100%);
}
.rce-mbox-btn-list {
position: absolute;
top: 50%;
}
.rce-mbox-btn-container {
display: inline-block;
width: 30px;
height: 30px;
margin-left: 3px;
margin-right: 3px;
}
Example of a very basic additional button (added sometimes in MessageListExample.tsx:
if (token() > 7) {
newMsg.customButtons = [
<div
onClick={() => {
console.log('custom button click')
}}
>
<MdInfo />
</div>,
]
}

Is it possiblet to get this merged? I would resolve the conflicts in that case. @emregudur i state again that this feature is an optin feature and doesnt change any functionality of existing code
@MaxNoetzold I will make custom buttons for MessageBox asap