# Drei - common helpers for threejs in react

**URL:** <https://discourse.threejs.org/t/drei-common-helpers-for-threejs-in-react/14686>\
**Category:** Resources\
**Tags:** react-three-fiber\
**Created:** [April 27, 2020, 12:28pm UTC](https://discourse.threejs.org/t/drei-common-helpers-for-threejs-in-react/14686 "2020-04-27T12:28:43Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [April 27, 2020, 12:28pm UTC](https://discourse.threejs.org/t/drei-common-helpers-for-threejs-in-react/14686/1 "2020-04-27T12:28:43Z")

</div>

not sure if react-specific showcases are considered OK, but i published this yesterday, could turn into a nice collection of useful helpers: [https://github.com/react-spring/drei](https://github.com/react-spring/drei)

if you click the sandbox links you can see it working. these are mostly abstractions for boilerplate-heavy primitives. saw myself repeating set-up code for things like controls, wiring up update loops, etc, so i thought: why not make it re-usable. all these components are self-managed and will clean up on unmount.

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [April 27, 2020, 1:00pm UTC](https://discourse.threejs.org/t/drei-common-helpers-for-threejs-in-react/14686/2 "2020-04-27T13:00:32Z")

</div>

> [@drcmda](#):
>
> not sure if react-specific showcases are considered OK

Seems fine to me. Although I think this would fit better in Resources than Showcase.

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [April 29, 2020, 4:03am UTC](https://discourse.threejs.org/t/drei-common-helpers-for-threejs-in-react/14686/3 "2020-04-29T04:03:37Z")

</div>

What do you mean by a “responsive” camera by the way? Just that it automatically resizes to fit the browser?

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [April 29, 2020, 3:53pm UTC](https://discourse.threejs.org/t/drei-common-helpers-for-threejs-in-react/14686/4 "2020-04-29T15:53:38Z")

</div>

yep, that’s basically it. not much to it, but aspect ratio and resize is taken care of since the canvas sits inside a resizeobserver. 🙂

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [April 30, 2020, 9:06am UTC](https://discourse.threejs.org/t/drei-common-helpers-for-threejs-in-react/14686/5 "2020-04-30T09:06:31Z")

</div>

I’ve been avoiding using resizeObserver because [caniuse reports only 70% support](https://caniuse.com/#search=resizeObserver). Do you polyfill this? Or can it be transpiled?

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [April 30, 2020, 9:10am UTC](https://discourse.threejs.org/t/drei-common-helpers-for-threejs-in-react/14686/6 "2020-04-30T09:10:50Z")

</div>

yes, it’s polyfilled where missing, i would recommend [@juggle/resize-observer](https://github.com/juggle/resize-observer)

we made a utility lib for it, it even works in nested scroll containers which was a nightmare to get right: [https://github.com/react-spring/react-use-measure](https://github.com/react-spring/react-use-measure)