Have ideas to improve npm?Join in the discussion! »

    flex-wrap-layout
    TypeScript icon, indicating that this package has built-in type declarations

    0.10.1 • Public • Published

    flex-wrap-layout

    npm version Node.js CI Bundle size Prettier Airbnb Code Style

    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():

    Minimal example with detectWrappedElements()

    • Without:

    Minimal example without detectWrappedElements()

    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

    Supported browsers

    IE 11 and evergreen browsers

    Limitations

    This will cause reflows (layout thrashing): https://gist.github.com/paulirish/5d52fb081b3570c81e3a

    Install

    npm i flex-wrap-layout

    DownloadsWeekly Downloads

    5

    Version

    0.10.1

    License

    MIT

    Unpacked Size

    42.3 kB

    Total Files

    27

    Last publish

    Collaborators

    • avatar