flex-wrap-layout

flex-wrap-layout

Detects flex-wrap via JavaScript (unfortunately not possible in CSS).

detectWrappedElements() and useDetectWrappedElements() are JavaScript functions that detect when elements are wrapped and let you define the CSS that goes with it.

This allows for responsive UIs without hardcoded CSS (width, min-width, media queries...) using the "natural" width of elements instead.

• With detectWrappedElements():

• Without:

Usage

npm install flex-wrap-layout

import React, { useRef } from 'react';
import ReactDOM from 'react-dom';

import { useDetectWrappedElements, wrapChildrenClassName } from 'flex-wrap-layout';
import 'flex-wrap-layout/src/detectWrappedElements.scss';

const boxStyle = {
  border: '1px solid',
  height: 60,
  margin: 5,
  padding: 5
};

function MyComponent() {
  const ref = useRef(null);
  useDetectWrappedElements(ref);

  return (
    <div ref={ref} className={wrapChildrenClassName}>
      <div style={boxStyle}>Paris</div>
      <div style={{ ...boxStyle, flex: 'auto' }}>Los Angeles</div>
      <div style={boxStyle}>Phnom Penh</div>
    </div>
  );
}

ReactDOM.render(<MyComponent />, document.getElementById('app'));

Examples

• Minimal example
• Boxes example
• Bootstrap 4 example

Supported browsers

IE 11 and evergreen browsers

Changelog

0.9.0 (2020/02/24)

• Rework everything: exposes useDetectWrappedElements(), detectWrappedElements() and DevTools
• Remove DetectRowWrapController, flex-wrap-layout.scss (layout='column', layout='row', vspace, hspace, grow)