Responsive D3 The React Way

Slide 1

Slide 1 text

Making D3 Responsive The React Way https://johnbartos.github.io/react-d3-demo/ johnbartos.io

Slide 2

Slide 2 text

I'm John Bartos, and this is my first talk ever

Slide 3

Slide 3 text

You want to make sweet D3 visualizations that just work™ on all screen sizes (you also care about doing it properly)

Slide 4

Slide 4 text

But there's a problem...

Slide 5

Slide 5 text

D3 needs to know its size before runtime You don't know size until runtime

Slide 6

Slide 6 text

Fortunately, there's an easy solution

Slide 7

Slide 7 text

ReactDOM.findDOMNode() GetBoundingClientRect() window.addEventListener('resize', ..) this.setState()

Slide 8

Slide 8 text

But there are two (2) things wrong with this approach!

Slide 9

Slide 9 text

findDOMNode() breaks component abstraction

Slide 10

Slide 10 text

A stateless component is now stateful

Slide 11

Slide 11 text

You need a higher-order component! (?)

Slide 12

Slide 12 text

HOCs are functions which take a component and returns another component that wraps it (thats it)

Slide 13

Slide 13 text

Our HOC gets size exactly as before and passes it as props to its child When 'resize' event fires, new props are passed, prompting a rerender

Slide 14

Slide 14 text

The HOC encapsulates all the nastiness

Slide 15

Slide 15 text

The wrapped component just gets props

Slide 16

Slide 16 text

There's a small catch – children render before parents Need to set initial state in HOC

Slide 17

Slide 17 text

(Please clap)