Le composant <AutoSizer> fournit une fonctionnalité permettant de réagir aux changements de taille de l'élément dans lequel ils sont contenus, en le mesurant. Lorsque le width ou le height de cet élément externe change, les enfants sont réaffichés et recevront les nouvelles mesures sous forme d'objet.
Usage
import { AutoSizer } from 'nr1'Exemples
Basique
function render() { const style = { backgroundColor: '#d8211a1a', border: 'dashed 1px #d8211a4d', };
return ( <AutoSizer> {({ width, height }) => ( <div style={{ ...style, height, width }}> width: {width}, height: {height} </div> )} </AutoSizer> );}Accessoires
OBLIGATOIREfonction | Fonction enfant qui sera appelée à chaque redimensionnement du parent. Il est appelé avec un objet contenant les clés |
chaîne | Nom de classe pour le style personnalisé. |
fonction | Rappel invoqué lorsque le conteneur est redimensionné. function ( |
énumération[] | Propriété d'espacement. L'espacement est défini comme un uplet de zéro à quatre valeurs, qui suivent les mêmes conventions que les propriétés CSS comme <Array of |
objet | Style en ligne pour un style personnalisé. |
Définitions de types
OnResizeArguments
{height: number, Height of the container
width: number, Width of the container
}