2

I have some JSON data in dummyData. I am not sure how can I place the chat bubbles on left and right according to the direction. I am using Material UI and context API. Image for the reference. I don't want to use any library other than material UI.

enter image description here

Currently, every chat bubble is positioned to the left. How to position bubbles according to the direction. Code so far (CodeSandbox):

    import React from 'react';
import makeStyles from '@material-ui/core/styles/makeStyles';

const useStyles = makeStyles(theme => ({
    container: {
        bottom: 0,
        position: 'fixed'
    },
    bubbleContainer: {
        width: '100%'
    },
    bubble: {
        border: '0.5px solid black',
        borderRadius: '10px',
        margin: '5px',
        padding: '10px',
        display: 'inline-block'
    }
}));

const ChatLayout = () => {
    const classes = useStyles();
    const dummyData = [
        {
            message: '1: This should be in left',
            direction: 'left'
        },
        {
            message: '2: This should be in right',
            direction: 'right'
        },
        {
            message: '3: This should be in left again',
            direction: 'left'
        }
    ];

    const chatBubbles = dummyData.map((obj, i = 0) => (
        <div className={classes.bubbleContainer}>
            <div key={i++} className={classes.bubble}>
                <div className={classes.button}>{obj.message}</div>
            </div>
        </div>
    ));
    return <div className={classes.container}>{chatBubbles}</div>;
};

export default ChatLayout;
Gaurav
  • 857
  • 3
  • 21
  • 29
  • 2
    I have made some css and logical changes in your codesanbox .check updated one : https://codesandbox.io/s/practical-faraday-zmkdm-updated-zmkdm , https://zmkdm.csb.app/ – Kais Sep 30 '19 at 05:05
  • This is perfect! Please make it an answer. How do I align "bubbleContainer" to the bottom? I tried adding "justify-content: flex-end !important" to "bubbleContainer" but doesn't work. – Gaurav Sep 30 '19 at 06:12
  • Did you mean you want bubble start from bottom to top? – Kais Sep 30 '19 at 07:18
  • Yes. I had used "bottom: 0, position: 'fixed'" to make it happen. – Gaurav Sep 30 '19 at 07:46
  • check now, I have updated style.css – Kais Sep 30 '19 at 07:52

1 Answers1

0

You can create separate div of chat bubble and apply CSS. And where you are receiving messages append the bubble div to your user list.

Muhammad Fahad Sajjad
  • 1
  • 1
    As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 10 '21 at 06:04