https://github.com/tkrotoff/flex-wrap-layout

Detect flex-wrap via JavaScript
https://github.com/tkrotoff/flex-wrap-layout

flex-wrap flexbox

Last synced: 4 months ago
JSON representation

Detect flex-wrap via JavaScript

• Host: GitHub
• URL: https://github.com/tkrotoff/flex-wrap-layout
• Owner: tkrotoff
• License: mit
• Created: 2015-08-02T13:37:23.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2023-03-11T01:54:37.000Z (over 2 years ago)
• Last Synced: 2024-10-12T07:10:55.268Z (9 months ago)
• Topics: flex-wrap, flexbox
• Language: TypeScript
• Homepage:
• Size: 6.17 MB
• Stars: 20
• Watchers: 6
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# flex-wrap-layout

[![npm version](https://badge.fury.io/js/flex-wrap-layout.svg)](https://www.npmjs.com/package/flex-wrap-layout)

[![Node.js CI](https://github.com/tkrotoff/flex-wrap-layout/workflows/Node.js%20CI/badge.svg)](https://github.com/tkrotoff/flex-wrap-layout/actions)

[![Bundle size](https://badgen.net/bundlephobia/minzip/flex-wrap-layout)](https://bundlephobia.com/result?p=flex-wrap-layout)

[![Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

[![Airbnb Code Style](https://badgen.net/badge/code%20style/airbnb/ff5a5f?icon=airbnb)](https://github.com/airbnb/javascript)

Detects flex-wrap via JavaScript ([unfortunately not possible in CSS](https://stackoverflow.com/q/40012428)).

[`detectWrappedElements()`](src/detectWrappedElements.ts) and [`useDetectWrappedElements()`](src/useDetectWrappedElements.ts) are JavaScript functions that detect when elements are wrapped and let you [define the CSS](src/detectWrappedElements.scss) 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()](examples/Minimal-detectWrappedElements.gif)

- Without:

![Minimal example without detectWrappedElements()](examples/Minimal.gif)

## Usage

`npm install flex-wrap-layout`

```JS

import { useRef } from 'react';

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 (

    


      
Paris

      
Los Angeles

      
Phnom Penh

    

  );

}

```


## Examples

- [Minimal example](examples/Minimal.tsx)

- [Boxes example](examples/Boxes.tsx)

- [Bootstrap example](examples/Bootstrap.tsx): https://codesandbox.io/s/github/tkrotoff/flex-wrap-layout/tree/codesandbox.io/examples

## Limitations

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