Toggle num cells

These two examples have dynamic height.

Toggle num cells

Live Editor

function NumCells() { const [keys, setKeys] = React.useState(() => range(5)); const _toggleNumCells = () => { setKeys(range(keys.length === 5 ? 10 : 5)) }; const TRANSITION_DURATION = 250; return ( <div style={{position: 'relative'}} > <button onClick={_toggleNumCells} style={{ margin: 4 }}>Random</button> <ReactMixitup keys={keys} dynamicDirection="vertical" transitionDuration={TRANSITION_DURATION} renderCell={(key, style, ref) => ( <div key={key} ref={ref} style={{ width: 48, height: 48, border: '1px solid black', margin: 4, display: 'flex', alignItems: 'center', justifyContent: 'center', transition: `transform ${TRANSITION_DURATION}ms ease`, ...style }} > {key} </div> )} renderWrapper={(style, ref, children, stage, frame) => { const w = (48 + 4 * 2) * 3; return ( <div style={{ display: 'flex', flexWrap: 'wrap', // as keys.length changes boxSizing must be border-box boxSizing: 'border-box', width: w, transition: `height ${TRANSITION_DURATION}ms ease`, ...style }} ref={ref} > {children} </div> ); }} /> </div> ); }

function NumCells() {
  const [keys, setKeys] = React.useState(() => range(5));

  const _toggleNumCells = () => {
    setKeys(range(keys.length === 5 ? 10 : 5))
  };

  const TRANSITION_DURATION = 250;

  return (
    <div style={{position: 'relative'}} >
      <button onClick={_toggleNumCells} style={{ margin: 4 }}>Random</button>
      <ReactMixitup
        keys={keys}
        dynamicDirection="vertical"
        transitionDuration={TRANSITION_DURATION}
        renderCell={(key, style, ref) => (
          <div
            key={key}
            ref={ref}
            style={{
              width: 48,
              height: 48,
              border: '1px solid black',
              margin: 4,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              transition: `transform ${TRANSITION_DURATION}ms ease`,
              ...style
            }}
          >
            {key}
          </div>
        )}
        renderWrapper={(style, ref, children, stage, frame) => {
          const w = (48 + 4 * 2) * 3;
          return (
            <div
              style={{
                display: 'flex',
                flexWrap: 'wrap',
                // as keys.length changes boxSizing must be border-box
                boxSizing: 'border-box',
                width: w,
                transition: `height ${TRANSITION_DURATION}ms ease`,
                ...style
              }}
              ref={ref}
            >
              {children}
            </div>
          );
        }}
      />
    </div>
  );
}

Result

Loading...

Debug

This shows how to debug the frames which are next up to be rendered. The debug props can be useful if your animation is not behaving as you'd expect. The measure frame, i.e. when rendering a wrapper with position absolute etc, should have the same size as the stale frame

Live Editor

function Random() { const [keys, setKeys] = React.useState(() => range(5)); const _random = () => { setKeys(shuffle(range(random(1, 10)))); }; const TRANSITION_DURATION = 250; return ( <div style={{position: 'relative', height: 480}} > <button onClick={_random} style={{margin: 4}}>Random</button> <ReactMixitup keys={keys} dynamicDirection="vertical" transitionDuration={TRANSITION_DURATION} debugMeasure={1000} renderCell={(key, style, ref) => ( <div key={key} ref={ref} style={{ width: 48, height: 48, border: '1px solid black', margin: 4, display: 'flex', alignItems: 'center', justifyContent: 'center', transition: `transform ${TRANSITION_DURATION}ms ease`, ...style }} > {key} </div> )} renderWrapper={(style, ref, children, stage, frame, activeFrame) => { const w = (48 + 4 * 2) * 3; return ( <div style={{ display: 'flex', flexWrap: 'wrap', // as keys.length changes boxSizing must be border-box boxSizing: 'border-box', width: w, transition: `height ${TRANSITION_DURATION}ms ease`, // add some styling when debugging left: stage === StageType.MEASURE ? w + 8 + (w + 8) * (frame.index % 2) : 0, border: (activeFrame && stage === StageType.MEASURE) ? '1px solid rgba(0, 0, 255, 0.12)' : '1px solid transparent', ...style }} ref={ref} > {children} </div> ); }} /> </div> ); }

function Random() {
  const [keys, setKeys] = React.useState(() => range(5));

  const _random = () => {
    setKeys(shuffle(range(random(1, 10))));
  };

  const TRANSITION_DURATION = 250;

  return (
    <div style={{position: 'relative', height: 480}} >
      <button onClick={_random} style={{margin: 4}}>Random</button>
      <ReactMixitup
        keys={keys}
        dynamicDirection="vertical"
        transitionDuration={TRANSITION_DURATION}
        debugMeasure={1000}
        renderCell={(key, style, ref) => (
          <div
            key={key}
            ref={ref}
            style={{
              width: 48,
              height: 48,
              border: '1px solid black',
              margin: 4,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              transition: `transform ${TRANSITION_DURATION}ms ease`,
              ...style
            }}
          >
            {key}
          </div>
        )}
        renderWrapper={(style, ref, children, stage, frame, activeFrame) => {
          const w = (48 + 4 * 2) * 3;
          return (
            <div
              style={{
                display: 'flex',
                flexWrap: 'wrap',

                // as keys.length changes boxSizing must be border-box
                boxSizing: 'border-box',
                width: w,
                transition: `height ${TRANSITION_DURATION}ms ease`,

                // add some styling when debugging
                left: stage === StageType.MEASURE ?
                  w + 8 + (w + 8) * (frame.index % 2) : 0,
                border: (activeFrame && stage === StageType.MEASURE) ?
                  '1px solid rgba(0, 0, 255, 0.12)' :
                  '1px solid transparent',

                ...style
              }}
              ref={ref}
            >
              {children}
            </div>
          );
        }}
      />
    </div>
  );
}

Result

Loading...