Mobile styles

[StanBorovko]

Hi, I'm using React-chatbotify and for now I'm very satisfied with this package. But now I came across a problem to handle different styles for desktop and mobile browsers using styles prop.

Simplified version of my code:

// my custom colors, layout, borders etc.
const commonStyles = {
  botCheckboxRowStyle: {
    width: '39%',
  },
  // other styles...
};
const mobileStyles = {
  ...commonStyles,
  botCheckboxRowStyle: {
    width: '80%',
  },
  // other styles...
};

export const ChatPopup = (props: ChatPopupProps) => {
  const {settings, styles, ...rest} = props;

  const getStyles = () => {
    return isDesktop
      ? {...(commonStyles as Styles), ...styles}
      : {...(mobileStyles as Styles), ...styles};
  }

  return (
    <ChatBot
      key={'chat'}
      settings={{...settings}}
      styles={getStyles()}
      {...rest}
    />
  );
}

The isDesktop value is correct for mobile screen sizes and the styles returned by getStyles is correct, but the component still rendered with botCheckboxRowStyle.width: 39%. Feels like the inline styles added into elements but doesn't update on props change.

Is there any way to handle desktop and mobile styles separately?

[tjtanjin]

Hey @StanBorovko, adding a key prop to ChatBot should solve your issue e.g. key={isDesktop ? "desktop" : "mobile"}. Internally, the chatbot does not re-render on changes to settings and styles (even if you manage it externally as a state). The chatbot only responds to settings and styles changes done via updateSettings and updateStyles exposed through hooks. That said, I recognize that this is not very ideal behavior - developers would expect settings and styles to reflect changes without additional work.

I'll see if I can spend some time refining this - it's something I've wanted to work on but kept low priority.

[StanBorovko]

@tjtanjin thanks for help, I changed the key prop and updated styles using useEffect:

const {updateStyles} = useStyles();
useEffect(() => {
    if (isDesktop) {
      updateStyles(_.merge(commonStyles, styles));
    } else {
      updateStyles(_.merge(commonStyles, mobileStyles, styles));
    }
}, [isDesktop]);

and it works as I expected.