Make your React Components aware of their width and height!

Last update: Jun 21, 2022

 

Make your React Components aware of their width and/or height!

 

npm MIT License Travis Codecov

  • Hyper Responsive Components!
  • Performant.
  • Easy to use.
  • Extensive browser support.
  • Supports functional and class Component types.
  • Tiny bundle size.
  • Demo: https://4mkpc.csb.app/

Use it via the render prop pattern (supports children or render prop):

import { SizeMe } from 'react-sizeme'

function MyApp() {
  return <SizeMe>{({ size }) => <div>My width is {size.width}px</div>}</SizeMe>
}

Or, via a higher order component:

import { withSize } from 'react-sizeme'

function MyComponent({ size }) {
  return <div>My width is {size.width}px</div>
}

export default withSize()(MyComponent)

 


TOCs

 


Intro

Give your Components the ability to have render logic based on their height and/or width. Responsive design on the Component level. This allows you to create highly reusable components that can adapt to wherever they are rendered.

Check out a working demo here: https://4mkpc.csb.app/

 


Installation

Firstly, ensure you have the required peer dependencies:

npm install react react-dom

Note: We require >[email protected] and >[email protected]

npm install react-sizeme

 


Configuration

The following configuration options are available. Please see the usage docs for how to pass these configuration values into either the component or higher order function.

  • monitorWidth (boolean, default: true)

    If true, then any changes to your Components rendered width will cause an recalculation of the "size" prop which will then be be passed into your Component.

  • monitorHeight (boolean, default: false)

    If true, then any changes to your Components rendered height will cause an recalculation of the "size" prop which will then be be passed into your Component.

    PLEASE NOTE: that this is set to false by default

  • refreshRate (number, default: 16)

    The maximum frequency, in milliseconds, at which size changes should be recalculated when changes in your Component's rendered size are being detected. This should not be set to lower than 16.

  • refreshMode (string, default: 'throttle')

    The mode in which refreshing should occur. Valid values are "debounce" and "throttle".

    "throttle" will eagerly measure your component and then wait for the refreshRate to pass before doing a new measurement on size changes.

    "debounce" will wait for a minimum of the refreshRate before it does a measurement check on your component.

    "debounce" can be useful in cases where your component is animated into the DOM.

    NOTE: When using "debounce" mode you may want to consider disabling the placeholder as this adds an extra delay in the rendering time of your component.

  • noPlaceholder (boolean, default: false)

    By default we render a "placeholder" component initially so we can try and "prefetch" the expected size for your component. This is to avoid any unnecessary deep tree renders. If you feel this is not an issue for your component case and you would like to get an eager render of your component then disable the placeholder using this config option.

    NOTE: You can set this globally. See the docs on first render.

 


Component Usage

We provide a "render props pattern" based component. You can import it like so:

import { SizeMe } from 'react-sizeme'

You then provide it either a render or children prop containing a function/component that will receive a size prop (an object with width and height properties):

<SizeMe>{({ size }) => <div>My width is {size.width}px</div>}</SizeMe>

or

<SizeMe render={({ size }) => <div>My width is {size.width}px</div>} />

To provide configuration you simply add any customisation as props. For example:

<SizeMe
  monitorHeight
  refreshRate={32}
  render={({ size }) => <div>My width is {size.width}px</div>}
/>

 


HOC Usage

We provide you with a higher order component function called withSize. You can import it like so:

import { withSize } from 'react-sizeme'

Firstly, you have to call the withSize function, passing in an optional configuration object should you wish to customise the behaviour:

const withSizeHOC = withSize()

You can then use the returned Higher Order Component to decorate any of your existing Components with the size awareness ability:

const SizeAwareComponent = withSizeHOC(MyComponent)

Your component will then receive a size prop (an object with width and height properties).

Note that the values could be undefined based on the configuration you provided (e.g. you explicitly do not monitor either of the dimensions)

Below is a full example:

import { withSize } from 'react-sizeme'

class MyComponent extends Component {
  render() {
    const { width, height } = this.props.size

    return (
      <div>
        My size is {width || -1}px x {height || -1}px
      </div>
    )
  }
}

export default withSize({ monitorHeight: true })(MyComponent)

onSize callback alternative usage

The higher order component also allows an alternative usage where you provide an onSize callback function.

This allows the "parent" to manage the size value rather than your component, which can be useful in specific circumstances.

Below is an example of it's usage.

Firstly, create a component you wish to know the size of:

import { withSize } from 'react-sizeme'

function MyComponent({ message }) {
  return <div>{message}</div>
}

export default withSize()(MyComponent)

Now create a "parent" component providing it a onSize callback function to the size aware component:

class ParentComponent extends React.Component {
  onSize = (size) => {
    console.log('MyComponent has a width of', size.width)
  }

  render() {
    return <MyComponent message="Hello world" onSize={this.onSize} />
  }
}

 


Under the hood

It can be useful to understand the rendering workflow should you wish to debug any issues we may be having.

In order to size your component we have a bit of a chicken/egg scenario. We can't know the width/height of your Component until it is rendered. This can lead wasteful rendering cycles should you choose to render your components based on their width/height.

Therefore for the first render of your component we actually render a lightweight placeholder in place of your component in order to obtain the width/height. If your component was being passed a className or style prop then these will be applied to the placeholder so that it can more closely resemble your actual components dimensions.

So the first dimensions that are passed to your component may not be "correct" dimensions, however, it should quickly receive the "correct" dimensions upon render.

Should you wish to avoid the render of a placeholder and have an eager render of your component then you can use the noPlaceholder configuration option. Using this configuration value your component will be rendered directly, however, the size prop may contain undefined for width and height until your component completes its first render.

 


Examples

Loading different child components based on size

import React from 'react'
import LargeChildComponent from './LargeChildComponent'
import SmallChildComponent from './SmallChildComponent'
import sizeMe from 'react-sizeme'

function MyComponent(props) {
  const { width, height } = props.size

  const ToRenderChild = height > 600 ? LargeChildComponent : SmallChildComponent

  return (
    <div>
      <h1>
        My size is {width}x{height}
      </div>
      <ToRenderChild />
    </div>
  )
}

export default sizeMe({ monitorHeight: true })(MyComponent)

EXTRA POINTS! Combine the above with a code splitting API (e.g. Webpack's System.import) to avoid unnecessary code downloads for your clients. Zing!

 


Server Side Rendering

Okay, I am gonna be up front here and tell you that using this library in an SSR context is most likely a bad idea. If you insist on doing so you then you should take the time to make yourself fully aware of any possible repercussions you application may face.

A standard sizeMe configuration involves the rendering of a placeholder component. After the placeholder is mounted to the DOM we extract it's dimension information and pass it on to your actual component. We do this in order to avoid any unnecessary render cycles for possibly deep component trees. Whilst this is useful for a purely client side set up, this is less than useful for an SSR context as the delivered page will contain empty placeholders. Ideally you want actual content to be delivered so that users without JS can still have an experience, or SEO bots can scrape your website.

To avoid the rendering of placeholders in this context you can make use of the noPlaceholders global configuration value. Setting this flag will disables any placeholder rendering. Instead your wrapped component will be rendered directly - however it's initial render will contain no values within the size prop (i.e. width, and height will be null).

import sizeMe from 'react-sizeme'

// This is a global variable. i.e. will be the default for all instances.
sizeMe.noPlaceholders = true

Note: if you only partialy server render your application you may want to use the component level configuration that allows disabling placeholders per component (e.g. sizeMe({ noPlaceholder: true }))

It is up to you to decide how you would like to initially render your component then. When your component is sent to the client and mounted to the DOM SizeMe will calculate and send the dimensions to your component as normal. I suggest you tread very carefully with how you use this updated information and do lots of testing using various screen dimensions. Try your best to avoid unnecessary re-rendering of your components, for the sake of your users.

If you come up with any clever strategies for this please do come share them with us! :)

 


Extreme Appreciation!

We make use of the awesome element-resize-detector library. This library makes use of an scroll/object based event strategy which outperforms window resize event listening dramatically. The original idea for this approach comes from another library, namely css-element-queries by Marc J. Schmidt. I recommend looking into these libraries for history, specifics, and more examples. I love them for the work they did, whithout which this library would not be possible. 💖

 


Backers

Thank goes to all our backers! [Become a backer].

GitHub

https://github.com/ctrlplusb/react-sizeme/
Comments
  • 1. Cannot read property 'insertBefore' of null

    As I work in an enterprise portal environment I have to deliver my React bundles in a quite unorthodox way.

    I attach the Webpack build bundle to the window object. The output property of my Webpack config looks a little bit like this:

    {
        libraryTarget: 'var',
        library: ['reactComponents', 'myStuff123']
    }
    

    I then pick up the component from the window object (e.g. window.reactComponents.myStuff123) and render the React component as such:

            ReactDOM.render(
                    React.createElement(window.reactComponents.myStuff123),
                    document.getElementById('UNIQUE_ID')
            );
    

    However, as I add a package, which includes react-resizeme, to the window object I guess that it's immediately trying to set up some event listeners or such, because I get this error:

    Uncaught TypeError: Cannot read property 'insertBefore' of null

    Is there any way of postponing the execution until it's actually rendered?

    Loading example

    A full example of the HTML and loading mechanisms looks like this:

    <!DOCTYPE html>
    <html>
    <head>
        <script src="react-0.14.8.min.js"></script>
        <script src="react-dom-0.14.8.min.js"></script>
        <script src="bundle.js"></script>
    </head>
    <body>
    
    <div id="UNIQUE_ID"></div>
    
    <script>
        (function(){
            ReactDOM.render(
                    React.createElement(window.reactComponents.NamespacedReactComponent),
                    document.getElementById('UNIQUE_ID')
            );
        })();
    </script>
    </body>
    </html>
    
    Reviewed by emiloberg at 2016-05-12 16:47
  • 2. “failed to execute 'removeChild' on 'Node'” Exception

    I'm getting the following exception in the issue fully described here (i can add details on request):

    https://stackoverflow.com/questions/51408036/failed-to-execute-removechild-on-node-exception

    scroll.js:639 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    
    at Object.uninstall (webpack:///./node_modules/element-resize-detector/src/detection-strategy/scroll.js?:639:36)
    at eval (webpack:///./node_modules/element-resize-detector/src/element-resize-detector.js?:300:31)
    at utils.forEach (webpack:///./node_modules/element-resize-detector/src/collection-utils.js?:14:22)
    at Object.uninstall (webpack:///./node_modules/element-resize-detector/src/element-resize-detector.js?:298:9)
    at SizeAwareComponent.componentWillUnmount (webpack:///./node_modules/pnk-react-components/node_modules/react-sizeme/dist/react-sizeme.js?:371:27)
    at callComponentWillUnmountWithTimer (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:9687:14)
    at HTMLUnknownElement.callCallback (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:104:14)
    at Object.invokeGuardedCallbackDev (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:142:16)
    at invokeGuardedCallback (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:191:29)
    at safelyCallComponentWillUnmount (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:9694:7)
    
    Reviewed by pinkynrg at 2018-07-18 19:57
  • 3. Typescript definitions

    Could there be any typescript definitions?

    Right now I made the following in my own code to create them, but it would be cool if they were on the package:

    type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
    
    export interface SizeMeProps {
      size: {
        width: number | null;
        height: number | null;
      };
    }
    
    export interface SizeMeOptions {
      monitorWidth?: boolean;
      monitorHeight?: boolean;
      monitorPosition?: boolean;
      refreshRate?: number;
      refreshMode?: 'throttle' | 'debounce';
      noPlaceholder?: boolean;
    }
    
    type SizeMeFunction = (options?: SizeMeOptions) => <P extends SizeMeProps>(component: React.ComponentType<P>) => React.ComponentType<Omit<P, 'size'>>;
    
    export const sizeMe: SizeMeFunction = require('react-sizeme');
    
    Reviewed by xaviergonz at 2018-01-05 12:10
  • 4. Figure out the SSR story

    I have been attempting to implement support for SSR. So far, the only semi-working solution I could come up with involves avoiding calling createResizeDetector if the window object is undefined.

    My fork is here https://github.com/lyuzashi/react-sizeme/commit/1242009b424f9c0ab54aa0ecd5e815a20fbbdff8

    Doing so will prevent any errors, however components that are wrapped by SizeMe are not included in the server-side rendered HTML.

    This appears to be due in part to the RenderWrapper, which is helpfully commented to be treaded on lightly.

    By setting the initial state of both width and height in SizeAwareComponent to NaN, the wrapper is short circuited and the component renders without error on both the server and client.

    This approach, however, does not pass the included tests – specifically any time the placeholder is expected to render before a size change occurs.

    Other attempts at cracking this puzzle have caused checksum errors.

    I am not entirely sure what the placeholder does. I'm fairly new to React but I get the feeling it's pretty important not to short-circuit it.

    Any help would be greatly appreciated. I'd love to get SSR working with this component – it looks very handy! Sorry this is so detailed.

    As a note, I chose to try NaN as the size for SSR, since it theoretically is a dimensionless environment but existing math code wont error out or evaluate in unexpected ways (due to casting), as it might with null. Not sure if that's the best idea, but it's what I came up with as a suggestion.

    Reviewed by lyuzashi at 2016-05-17 14:09
  • 5. Cannot read property 'onShrink' of undefined

    I'm seeing the following error with version 2.4.2.

    Uncaught TypeError: Cannot read property 'onShrink' of undefined
        at HTMLDivElement.onShrinkScroll (scroll.js:401)
    

    This error seems to be related to this issue.

    As mentioned in the comments, I downgraded to 2.4.1, after which the error went away.

    Reviewed by salimhamed at 2018-04-08 07:15
  • 6. Preact Support

    We've just gone through the process of dropping preact-compat in favour of a fully preact codebase and thought this might be useful for other people too. This was done quickly and dirtily, if you're interested in getting it merged I would have a tidy-up but I just wanted to open this for discussion really. I've also done a fork of react-component-queries, but that relies on this so I thought I'd open it here.

    Reviewed by sanpoChew at 2017-12-22 10:58
  • 7. Added definitions.

    Using the definitions from #130 by @xaviergonz, I created the react-sizeme.d.ts file and updated the package.json to use them.

    Tested locally and it seems to work fine. Would appreciate someone more familiar with TypeScript bless this PR before merging it.

    Thanks!

    Reviewed by slig at 2018-08-30 13:08
  • 8. Cannot read property 'onExpand' of undefined

    HI , I am using 2.4.2 version and getting following two errors

    1. Uncaught TypeError: Cannot read property 'onExpand' of undefined at HTMLDivElement.onExpandScroll (scroll.js:397)
    2. Uncaught TypeError: Cannot read property 'onShrink' of undefined at HTMLDivElement.onShrinkScroll (scroll.js:401)

    there is one similar issue was already logged,but its status is closed. So logging it again.

    Reviewed by indusoni at 2018-05-16 10:45
  • 9. Render props pattern usage

    Have you ever considered having sizeMe work where you use a <SizeMe> component and it passes the size down as a prop? I think this method feels a bit more readable. ReactMotion does something like this.

    <SizeMe monitorHeight>
        {size => <div>{size.width}, {size.height}</div>}
    </SizeMe>
    
    Reviewed by chrisdrackett at 2017-02-18 18:29
  • 10. Need to call a function on a wrapped component

    Hello,

    Thanks for this product!

    I have a component that I need to call a data refresh method on when it is unhidden from a view. Wrapping it in sizeme was great for helping it to size correctly, but now I can't access it to call the refresh because the object is now a resizeme thing, instead of the old component with the refresh function.

    How can I send a message to the object inside sizeme?

    Reviewed by JaneCoder at 2016-09-14 17:19
  • 11. Optional clamping for reported width and height

    Hey Sean,

    Thanks a lot for your component – it saved me a couple of hours of life :–)

    Not sure you would want to take this on board, but here is a thought that came to me when I was using Mapbox GL wrapped into react-sizeme. There was an issue when my container div shrunk to 0 – WebGL immediately threw a nasty error because the viewport had to be at least 1 px in size. Here is my workaround for this:

    
    // MySuperMap = ...
    
    // Do not allow width / height be 0
    const sizeMeFix = (ComponentToWrap) => ({ size, ...rest }) => {
      const {
        width,
        height,
      } = size || {};
    
      const fixedSize = {
        width: isNumber(width) ? Math.max(width, 1) : width,
        height: isNumber(height) ? Math.max(height, 1) : height,
      };
    
      return <ComponentToWrap {...rest} size={fixedSize} />;
    };
    
    const MySizedSuperMap = sizeMe({
        monitorHeight: true,
        refreshRate: 200,
    })(sizeMeFix(MySuperMap));
    
    export default connect(mapStateToProps, mapDispatchToProps)(MySizedSuperMap);
    

    So sizeMe is a wrapper for another wrapper called sizeMeFix, which makes sure that the wrapped component does not get incorrect numbers. I know I can fix the size right in the render() method of my component, but the size might be requested in a few other methods and this will create unwanted repetitions.

    There might be other cases when reported width and height need to be clamped, so maybe having extra options like reportedMinWidth, reportedMaxWidth, reportedMinHeight, reportedMaxHeight can be a useful addition to your wrapper:

    const MySizedSuperMap = sizeMe({
       monitorHeight: true,
       refreshRate: 200, 
       reportedMinHeight: 1,
       reportedMinWidth: 1,
    })(MySuperMap);
    

    What do you think?

    Reviewed by kachkaev at 2016-08-16 11:35
  • 12. Bump semver-regex from 3.1.2 to 3.1.4

    Bumps semver-regex from 3.1.2 to 3.1.4.

    Release notes

    Sourced from semver-regex's releases.

    v3.1.4

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-06-03 23:45
  • 13. Bump minimist from 1.2.5 to 1.2.6

    Bumps minimist from 1.2.5 to 1.2.6.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-04-10 09:28
  • 14. Feature Request: clientHeight, offsetHeight and scrollHeight

    We use this library extensively, and it is extremely useful, but it would be useful to be able to access both the height that a SizeMe-wrapped container takes up (its clientHeight and offsetHeight, depending on the inclusion of the scrollbar and border) and the size that the contents of the container take up (the scrollHeight). I think this can be accessed by the use of two separate SizeMes around a parent container set to represent the clientHeight and a child container styled so that its height matches the scrollHeight but that doesn't seem ideal for performance reasons.

    Reviewed by amber-cd at 2022-04-05 14:04
  • 15. Bump nth-check from 2.0.0 to 2.0.1

    Bumps nth-check from 2.0.0 to 2.0.1.

    Release notes

    Sourced from nth-check's releases.

    v2.0.1

    Fixes:

    • Replace regex with hand-rolled parser for nth-expressions (#9) 9894c1d
      • Ensures parsing will always have linear time complexity.

    Internal:

    • chore(ci): Use GitHub Actions, Dependabot (#10) e02b4dd
    • Bump dependencies

    https://github.com/fb55/nth-check/compare/v2.0.0...v2.0.1

    Commits
    • 65e40b0 2.0.1
    • ff63f1d Bump eslint-config-prettier from 6.15.0 to 8.3.0 (#11)
    • ff24c93 Bump jest from 26.6.3 to 27.2.0 (#17)
    • da9d78a Bump @​typescript-eslint/parser from 4.9.0 to 4.31.1 (#18)
    • fa35caf Bump @​types/node from 14.14.10 to 16.9.1 (#16)
    • 5f39402 Bump @​typescript-eslint/eslint-plugin from 4.9.0 to 4.31.1 (#19)
    • a11c0c1 Bump prettier from 2.2.1 to 2.4.0 (#20)
    • 3ddd820 Bump @​types/jest from 26.0.15 to 27.0.1 (#13)
    • 732ab0a Bump ts-jest from 26.4.4 to 26.5.6 (#15)
    • 7efd9da Bump eslint from 7.14.0 to 7.32.0 (#14)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-09-21 08:15
  • 16. Bump tmpl from 1.0.4 to 1.0.5

    Bumps tmpl from 1.0.4 to 1.0.5.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-09-21 02:49
  • 17. Bump path-parse from 1.0.6 to 1.0.7

    Bumps path-parse from 1.0.6 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-08-10 23:49
Encapsulated styling for your javascript components with all the power of javascript and CSS combined.

Stilr Encapsulated styling for your javascript components with all the power of javascript and CSS combined. Unique class names (Content Hash Based) U

May 30, 2022
React components that allow you to divide a page or container into nestable anchored, scrollable and resizable spaces.
React components that allow you to divide a page or container into nestable anchored, scrollable and resizable spaces.

React Spaces An easy to understand and nestable layout system, React Spaces allow you to divide a page or container into anchored, scrollable and resi

Jun 14, 2022
FlexLayout is a layout manager that arranges React components in multiple tab sets, tabs can be resized and moved.
FlexLayout is a layout manager that arranges React components in multiple tab sets, tabs can be resized and moved.

FlexLayout is a layout manager that arranges React components in multiple tab sets, tabs can be resized and moved.

Jun 15, 2022
A no-frills flexbox grid system for React, powered by styled-components.
A no-frills flexbox grid system for React, powered by styled-components.

Quick Jump Quick Jump Features Requirements Installation Using yarn Using npm Usage Basic Example Responsive Example Upgrading Documentation Grid.Prov

Jun 8, 2022
Resizable Flex layout container components for advanced React web applications
Resizable Flex layout container components for advanced React web applications

About Re-F|ex Re-F|ex is a React flex-based layout component library which I created because none of the components I found out there could satisfy my

Jun 26, 2022
🌋 React-first components GUI
🌋 React-first components GUI

?? React-first components GUI

Jun 20, 2022
Carpatin is a React JS Admin Dashboard Template that focuses on the management flows of a back-office application. We leverage the Material-UI power of stylizing the components in a way that feels more professional.
Carpatin is a React JS Admin Dashboard Template that focuses on the management flows of a back-office application. We leverage the Material-UI power of stylizing the components in a way that feels more professional.

Carpatin is a React JS Admin Dashboard Template that focuses on the management flows of a back-office application. We leverage the Material-UI power of stylizing the components in a way that feels more professional.

Jun 3, 2022
Resizable Flex layout container components for advanced React web applications
Resizable Flex layout container components for advanced React web applications

About Re-F|ex Re-F|ex is a React flex-based layout component library which I created because none of the components I found out there could satisfy my

Jun 24, 2022
Kilvin is a set of universal & primitive Layout Components for React.

Kilvin is a set of universal & primitive Layout Components for React.

May 26, 2022
🦸 Motion Layout - Create beautiful immersive React hero animations using shared components.
🦸  Motion Layout - Create beautiful immersive React hero animations using shared components.

Motion Layout Create beautiful immersive React hero animations using shared components. Docs React Motion Layout Docs About Motivation There are amazi

May 14, 2022
Responsive JSX layouts with Styled Components
Responsive JSX layouts with Styled Components

React Super Styled Responsive JSX layouts with Styled Components Try the DEMO RSS is a small React component library which aims to accelerate authorin

Dec 10, 2021
Beautiful and accessible drag and drop for lists with React
Beautiful and accessible drag and drop for lists with React

⚠️ Maintenance & support This library continues to be relied upon heavily by Atlassian products, but we are focused on other priorities right now and

Jun 25, 2022
Responsive styles for react-native and react-native-web
Responsive styles for react-native and react-native-web

React Native Responsive Styles rn-responsive-styles Create responsive styles for react-native and react-native-web with minimal rerenders This library

Jun 10, 2022
React-masonry - An easy to use and simple masonry layout for React Js based on flexbox column

React Masonry An easy to use and simple masonry layout for React Js based on fle

Jun 15, 2022
A draggable and resizable grid layout with responsive breakpoints, for React.
A draggable and resizable grid layout with responsive breakpoints, for React.

React-Grid-Layout React-Grid-Layout is a grid layout system much like Packery or Gridster, for React. Unlike those systems, it is responsive and suppo

Jun 21, 2022
The UI design language and React library for Conversational UI
The UI design language and React library for Conversational UI

The UI design language and React library for Conversational UI

Jun 25, 2022
My portfolio website simulating macOS's GUI, developed with React and tailwindcss.
My portfolio website simulating macOS's GUI, developed with React and tailwindcss.

My portfolio website simulating macOS's GUI, developed with React and tailwindcss.

Jun 24, 2022
🍏 macOS Big Sur UI clone for the web built with React, Next.js, TypeScript, and Tailwind CSS
🍏 macOS Big Sur UI clone for the web built with React, Next.js, TypeScript, and Tailwind CSS

?? Giant Sur A simple UI clone of macOS Big Sur for the web. Technologies React Next.js TypeScript Tailwind CSS Docker Jest Enzyme Demo https://giants

Jun 16, 2022
A powerful React component to abstract over flexbox and create any layout on any browser

FlexView A powerful React component to abstract over flexbox and create any layout on any browser. Install yarn add react-flexview Why The flexbox AP

Apr 30, 2022