react-resize-aware - ⇲👁 A simple React component which allows to listen the resize event of itself when it's resized

  •        19

A simple React.js component you can use to make any piece of UI aware of its size.Each time the component' size changes, your component will be notified by one of the methods described below. The size change can be detected by a window resize, a CSS media query, a CSS pseudo selector, a JavaScript action or really, anything.

https://github.com/FezVrasta/react-resize-aware#readme
https://github.com/FezVrasta/react-resize-aware

Tags
Implementation
License
Platform

   




Related Projects

react-responsive - Media queries in react for responsive design

  •    Javascript

The best supported, easiest to use react media query module. This module is pretty straightforward: You specify a set of requirements, and the children will be rendered if they are met. Also handles changes so if you resize or flip or whatever it all just works.

react-sizes - :left_right_arrow: Hoc to easily map window sizes to props.

  •    Javascript

React Sizes is a high-order component with a high performance that transform window sizes (width and height) into props. You can check inside your component, for example, if user's window is less than 480 pixels of width, and add a custom content. It can be very powerful for when you need to display different content for mobile and desktop. But it's not limited to this case. Just use that at your needs.

react-dimensions - [Looking for maintainers]

  •    Javascript

React higher-order component to get the dimensions of a wrapper element and pass them as properties to the child element. DEVELOPMENT STATUS: I'm not really using this any more since for grids/tables in React I've switched from fixed-data-table (which I was using this for) to react-virtualized which includes similar functionality to this with the Autosizer. I'm happy for someone else to take this module on.

react-sizeme - Make your React Components aware of their width and height!

  •    Javascript

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. 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.

react-resizable - A simple React component that is resizable with a handle.

  •    Javascript

A simple widget that can be resized via a handle. You can either use the <Resizable> element directly, or use the much simpler <ResizableBox> element.


react-media - CSS media queries for React

  •    Javascript

react-media is a CSS media query component for React.A <Media> component listens for matches to a CSS media query and renders stuff based on whether the query matches or not.

react-native-image-resizer - 🗻 Resize local images with React Native

  •    Objective-C

A React Native module that can create scaled versions of local images (also supports the assets library on iOS). Note: on latest versions of React Native, you may have an error during the Gradle build on Android (com.android.dex.DexException: Multiple dex files define Landroid/support/v7/appcompat/R$anim). Run cd android && ./gradlew clean to fix this.

re-resizable - 📏 A resizable component for React.

  •    Javascript

📏 A resizable component for React. If you use size props, please manage state by yourself.

react-rnd - 🖱 A resizable and draggable component for React.

  •    TypeScript

A resizable and draggable component for React. The width and height property is used to set the default size of the component. For example, you can set 300, '300px', 50%. If omitted, set 'auto'.

react-autosize-textarea - A textarea perfectly compatible with ReactJS default one which auto resizes its height based on user input

  •    TypeScript

A light replacement for built-in <textarea /> component which automatically adjusts its height to match the content. You can pass any prop you're allowed to use with the default React textarea (valueLink too).

react-avatar-editor - Avatar & profile picture component editor

  •    Javascript

Facebook like, avatar / profile picture component. Resize, crop and rotate your uploaded image using a clear user interface. The resulting image will have the same resolution as the original image, regardless of the editor's size. If you want the image sized in the dimensions of the canvas you can use getImageScaledToCanvas.

react-bounds - :left_right_arrow: The Future of Media Queries

  •    Javascript

Like Media Queries - Set min and max values like breakpoints. Use the Bounds in JS - Active bounds are passed down as props.

react-player - A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion

  •    Javascript

A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, and DailyMotion. Not using React? No problem. The component parses a URL and loads in the appropriate markup and external SDKs to play media from various sources. Props can be passed in to control playback and react to events such as buffering or media ending. See the demo source for a full example.

react-grid-layout - A draggable and resizable grid layout with responsive breakpoints, for React.

  •    Javascript

React-Grid-Layout is a grid layout system much like Packery or Gridster, for React. Unlike those systems, it is responsive and supports breakpoints. Breakpoint layouts can be provided by the user or autogenerated.

Aqua-Resizer - Resize WordPress images on the fly

  •    PHP

This small script will allow you to resize & crop WordPress images uploaded via the media uploader on the fly. It relies on WP's native functions to resize the images, and checks if there is an already resized version of the image so that it won't be wasting your server's resources to regenerate the images. There are a couple of image resizing scripts out there that already have this function. Some authors simply use the add_image_size() function to define custom image sizes that will be generated for each image uploaded via the media uploader. I mostly find these methods somewhat a little complicated to use, or having some limitations or too resource intensive.

react-native-extended-stylesheet - Extended StyleSheets for React Native

  •    Javascript

Drop-in replacement of React Native StyleSheet with media-queries, variables, dynamic themes, relative units, percents, math operations, scaling and other styling stuff.Global variables are passed to EStyleSheet.build() and available in all stylesheets.

react-onclickoutside - An onClickOutside wrapper for React components

  •    Javascript

This is a React Higher Order Component (HOC) that you can use with your own React components if you want to have them listen for clicks that occur somewhere in the document, outside of the element itself (for instance, if you need to hide a menu when people click anywhere else on your page). Note that this HOC relies on the .classList property, which is supported by all modern browsers, but not by deprecated and obsolete browsers like IE (noting that Microsoft Edge is not Microsoft Internet Explorer. Edge does not have any problems with the classList property for SVG elements). If your code relies on classList in any way, you want to use a polyfill like dom4.

react-tunnels - 🚇 Render React components in placeholders that are placed somewhere else in the component tree

  •    Javascript

Render React components in placeholders that are placed somewhere else in the component tree. There is a common use case in React apps where you want to define a Layout where the content of some elements is defined by children components. For example, you want to define Layout just once and reuse it for every page but it has a breadcrumb whose steps depend on children components. This tiny library allows you to define tunnels to render from an element to whatever another element in the App, even elements located on top of the tree. It's like Portal but the target is a component instead of a DOM element.

caire - Content aware image resize library

  •    Go

Caire is a content aware image resize library based on Seam Carving for Content-Aware Image Resizing paper. The library is capable detecting human faces prior resizing the images via https://github.com/esimov/pigo, which does not require to have OpenCV installed.

react-native-calendar-events - React Native Module for iOS and Android Calendar Events

  •    Java

A React Native module to help access and save events to iOS and Android calendars. This package assumes that you already have a React Native project or are familiar with React Native. If not, checkout the official documentation for more details about getting started with React Native.





We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.