rehooks / Component Size
Licence: mit
React hook for determining the size of a component
Stars: ✭ 224
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Component Size
React Laag
Hooks to build things like tooltips, dropdown menu's and popovers in React
Stars: ✭ 568 (+153.57%)
Mutual labels: hook, component
Element Queries Spec
A spec for a Container-Style Element Query Syntax
Stars: ✭ 375 (+67.41%)
Mutual labels: component, element
React Cool Dimensions
😎 📏 React hook to measure an element's size and handle responsive components.
Stars: ✭ 419 (+87.05%)
Mutual labels: size, hook
Made With Love
🚀 An experimental project which demonstrates an Angular Package which contains Angular Elements and Schematics
Stars: ✭ 67 (-70.09%)
Mutual labels: component, element
Lottie React
A lightweight React library for rendering complex After Effects animations in real time using Lottie.
Stars: ✭ 83 (-62.95%)
Mutual labels: hook, component
React Nprogress
⌛️ A React primitive for building slim progress bars.
Stars: ✭ 173 (-22.77%)
Mutual labels: hook, component
Element Patch
An extension package based on vue and element-ui. 一个基于 vue 与 element-ui 的扩展包,提供数据驱动的表单渲染,菜单渲染,表格拖拽,权限控制等功能
Stars: ✭ 187 (-16.52%)
Mutual labels: component, element
React Intl Tel Input
Rewrite International Telephone Input in React.js. (Looking for maintainers, and PRs & contributors are also welcomed!)
Stars: ✭ 212 (-5.36%)
Mutual labels: component
Vue Dynamic Form Component
Vue dynamic nested form component, support nested Object/Hashmap/Array. Vue动态多级表单组件,支持嵌套对象/Hashmap/数组。
Stars: ✭ 220 (-1.79%)
Mutual labels: component
React Native Typing Animation
💬 A typing animation for your React Native chat app based on simple trigonometry to create better loaders.
Stars: ✭ 211 (-5.8%)
Mutual labels: component
Understand Plugin Framework
demos to help understand plugin framwork
Stars: ✭ 2,507 (+1019.2%)
Mutual labels: hook
Vuejs Tree
A highly customizable and blazing fast Vue tree component ⚡🌲
Stars: ✭ 211 (-5.8%)
Mutual labels: component
React Native Skeleton Content
A customizable skeleton-like loading placeholder for react native projects using expo.
Stars: ✭ 221 (-1.34%)
Mutual labels: component
Browser Kit
The BrowserKit component simulates the behavior of a web browser, allowing you to make requests, click on links and submit forms programmatically.
Stars: ✭ 2,563 (+1044.2%)
Mutual labels: component
React Native Action Button
customizable multi-action-button component for react-native
Stars: ✭ 2,408 (+975%)
Mutual labels: component
Use Image Color
🎨 A hook to grab a color palette from images. Render a skeleton color while your original image still loading.
Stars: ✭ 222 (-0.89%)
Mutual labels: hook
V Bar
The virtual responsive crossbrowser scrollbar component for VueJS 2x
Stars: ✭ 216 (-3.57%)
Mutual labels: component
@rehooks/component-size
Install
yarn add @rehooks/component-size
Usage
import { useRef } from 'react'
import useComponentSize from '@rehooks/component-size'
function MyComponent() {
let ref = useRef(null)
let size = useComponentSize(ref)
// size == { width: 100, height: 200 }
let { width, height } = size
let imgUrl = `https://via.placeholder.com/${width}x${height}`
return (
<div style={{ width: '100%', height: '100%' }}>
<img ref={ref} src={imgUrl} />
</div>
)
}
ResizeObserver
Resize Observer is the API is used to determine if an element is resized. Browser support is pretty good in Chrome, but is still missing support in other major browsers.
Polyfill
You can import the polyfill directly from here
yarn add resize-observer-polyfill
Then import it in your app:
import 'resize-observer-polyfill'
If you are using Webpack (or similar) you could use dynamic imports, to load the Polyfill only if needed. A basic implementation could look something like this:
loadPolyfills()
.then(() => /* Render React application now that your Polyfills are ready */)
/**
* Do feature detection, to figure out which polyfills needs to be imported.
**/
function loadPolyfills() {
const polyfills = []
if (!supportsResizeObserver()) {
polyfills.push(import('resize-observer-polyfill'))
}
return Promise.all(polyfills)
}
function supportsResizeObserver() {
return (
'ResizeObserver' in global &&
'ResizeObserverEntry' in global &&
'contentRect' in ResizeObserverEntry.prototype
)
}
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].