Creating dimensions in React
Creating dimensions in React can be really easy! We use a custom hook for watching the size of our wrapper and automatically calculating the dimensions of our bounds.
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the Fullstack D3 Masterclass course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
[00:00 - 00:14] Okay, so for our next step, we want to get the dimensions of our wrapper. Now we might want to use this timeline component in multiple places, in which case we don't want to hard code that within the height.
[00:15 - 00:25] So instead, we went ahead and created this use chart dimensions React hook that we can use over and over. So it's defined in this utils file.
[00:26 - 00:38] You don't necessarily need to walk through and understand exactly what it's doing. But a basic sense is you can pass in a dimensions object that has different margins.
[00:39 - 00:47] You can specify a specific height or width. But if you don't, it'll default to these margins and it'll find the height and/ or width of your container.
[00:48 - 00:58] So what happens is it uses a ref that we're going to get to in a second. And these dimensions, it's going to find these with the defaults.
[00:59 - 01:10] And then the hook has this local state of the width and the height. And basically, when it first loads, it'll create this resize observer.
[01:11 - 01:38] And whenever this element changes its width or height, it'll go ahead and call this change width function, which will update the local state. So onload and whenever it updates onload, whenever height width or dimensions are changed or when that element is resized using this native resize observer.
[01:39 - 01:58] And then what it does is it passes back this array with that ref and these new settings. So the way we can use this is we can create an array with the ref and also the dimensions, which we can use this shorthand here, DMS.
[01:59 - 02:08] I use that sometimes just because dimensions is such a long word and it opens up room for typos and things like that. And then we're going to grab our hook.
[02:09 - 02:21] And then if we want to update the margins and not use the defaults or hard code the width or height, we could set that in here. So if we wanted a width of 100, we could specify that here.
[02:22 - 02:37] And the only other thing we have to do is pass this ref over to this div. And what that's going to do is tell our hook what element we want it to add that resize observer on and measure the width and height.
[02:38 - 02:47] So what we can do here is we can console log these dimensions to make sure that they're do. Why don't we think they're doing?
[02:48 - 02:51] And here we go. So we have these default margins.
[02:52 - 03:13] We have our width and our height are with is 100 pixels and are bounded with is zero because the left and right margins are wider than the width. But if we take this out and just use the grab the width from that container, let's go ahead and see.
[03:14 - 03:21] See what happens here. No, just save this file, please.
[03:22 - 03:26] Let's see. Come on.
[03:27 - 03:34] Let's just refresh. So what it should be doing is grabbing the width of this container.
[03:35 - 03:44] So here we go. So it has a width of 500 and then it calculates the bounded width and bounded height.
[03:45 - 04:02] And then whenever we resize this, it should send us this new width and new height and just keep everything in sync. So whenever we use dimensions within our component, it should perfectly reflect what is on our webpage, which is really great.