Is there a way to make this responsive?

[FranciscoG]

Great library!

I was curious if there was a way to make the tiles responsive for smaller screens. Would be cool if the "direction: row" changed to a column on smaller screens.

For now, I am kind of hacking it using window.matchMedia and a window resize listener, but that re-renders everything. I would prefer to have it naturally just re-order using styling if possible.

I'm going to poke around in the CSS to see if I can make this happen

Below are 2 ways I've tried that I was considering "hacky" but maybe they are fine:

"use client"
import 'react-mosaic-component/react-mosaic-component.css';
import { Mosaic } from 'react-mosaic-component';
import { useEffect, useState } from 'react';

import styles from '$/app/page.module.css'

const ELEMENT_MAP: { [viewId: string]: JSX.Element } = {
  a: <div>Left Window</div>,
  b: <div>Top Right Window</div>,
  c: <div>Bottom Right Window</div>,
};

export default function Home() {
  const [isSmall, setIsSmall] = useState(false);

  useEffect(() => {
    let mql: MediaQueryList;
    function measureScreen() {
      mql = window.matchMedia("(max-width: 600px)");
      setIsSmall(mql.matches)
    }
    window.addEventListener('resize', measureScreen)
    return () => {
      window.removeEventListener('resize', measureScreen)
    }
  }, [])

  return (
    <main className={styles.main}>
      {isSmall && <div>Small Screen</div>}
      {!isSmall && (
        <Mosaic<string>
        renderTile={(id) => ELEMENT_MAP[id]}
        initialValue={{
          direction: 'row',
          first: 'a',
          second: {
            direction: 'column',
            first: 'b',
            second: 'c',
          },
          splitPercentage: 70,
        }}
      />

      )}
    </main>
  )
}

and optionally, we just change the object being passed to initialValue

export default function Home() {
  const [isSmall, setIsSmall] = useState(false);

  useEffect(() => {
    let mql: MediaQueryList;
    function measureScreen() {
      mql = window.matchMedia("(max-width: 600px)");
      setIsSmall(mql.matches)
    }
    window.addEventListener('resize', measureScreen)
    return () => {
      window.removeEventListener('resize', measureScreen)
    }
  }, [])

  let config: MosaicNode<string> = {
    direction: 'row',
    first: 'a',
    second: {
      direction: 'column',
      first: 'b',
      second: 'c',
    },
    splitPercentage: 70,
  }
  if (isSmall) {
    config = {
      direction: 'column',
      first: 'a',
      second: 'b',
      splitPercentage: 70,
    }
  }

  return (
    <main className={styles.main}>
      <Mosaic<string>
        renderTile={(id) => ELEMENT_MAP[id]}
        initialValue={config}
      />
    </main>
  )
}