Estoy tratando de crear una entrada de rango que muestre una información sobre herramientas justo encima del control deslizante.
Revisé algunos ejemplos de Vanilla JS en línea y parece que necesito tener el ancho del elemento para lograrlo.
Entonces, me preguntaba cómo obtener el ancho de los elementos.
Más o menos el equivalente del método JQuery $(element).width()
class MyComponent extends Component { constructor(props){ super(props) this.myInput = React.createRef() } componentDidMount () { console.log(this.myInput.current.offsetWidth) } render () { return ( // new way - as of React@16.3 <div ref={this.myInput}>some elem</div> // legacy way // <div ref={(ref) => this.myInput = ref}>some elem</div> ) } }Esta es básicamente la respuesta de Marco Antônio para un enlace personalizado de React, pero modificado para establecer las dimensiones inicialmente y no solo después de un cambio de tamaño.
export const useContainerDimensions = myRef => { const getDimensions = () => ({ width: myRef.current.offsetWidth, height: myRef.current.offsetHeight }) const [dimensions, setDimensions] = useState({ width: 0, height: 0 }) useEffect(() => { const handleResize = () => { setDimensions(getDimensions()) } if (myRef.current) { setDimensions(getDimensions()) } window.addEventListener("resize", handleResize) return () => { window.removeEventListener("resize", handleResize) } }, [myRef]) return dimensions; };Usado de la misma manera:
const MyComponent = () => { const componentRef = useRef() const { width, height } = useContainerDimensions(componentRef) return ( <div ref={componentRef}> <p>width: {width}px</p> <p>height: {height}px</p> <div/> ) }