# How can I add lightGizmo on react-babylonjs

**URL:** https://forum.babylonjs.com/t/how-can-i-add-lightgizmo-on-react-babylonjs/23228
**Category:** Questions
**Tags:** react, lighting, gizmo
**Created:** [August 20, 2021, 10:13am UTC](https://forum.babylonjs.com/t/how-can-i-add-lightgizmo-on-react-babylonjs/23228 "2021-08-20T10:13:48Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Maxx](https://avatars.discourse-cdn.com/v4/letter/m/5fc32e/32.png) [@Maxx](https://forum.babylonjs.com/u/Maxx)
#### Post date: [August 20, 2021, 10:13am UTC](https://forum.babylonjs.com/t/how-can-i-add-lightgizmo-on-react-babylonjs/23228/1 "2021-08-20T10:13:48Z")

</div>

I’am impressed this react-babylonjs update about gizmo

it is very simple and comportable

but i don’t know how to add lightGizmo

i thought it require babylonCoreLight and coreScene ,  
however i can’t bring coreScene to lightGizmo component

please tell me how to add lightGizmo component

---

<div class="post-metadata">

### Author: ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)
#### Post date: [August 20, 2021, 12:10pm UTC](https://forum.babylonjs.com/t/how-can-i-add-lightgizmo-on-react-babylonjs/23228/2 "2021-08-20T12:10:45Z")

</div>

pinging @brianzinn , the mastermind behind the babylon-react vinding

---

<div class="post-metadata">

### Author: ![brianzinn](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brianzinn/32/28013_2.png) [@brianzinn](https://forum.babylonjs.com/u/brianzinn)
#### Post date: [August 20, 2021, 5:16pm UTC](https://forum.babylonjs.com/t/how-can-i-add-lightgizmo-on-react-babylonjs/23228/3 "2021-08-20T17:16:07Z")

</div>

Hi, I have to confess that I added Gizmo without really knowing all of the different ones available (the code was generated) and that one I couldn’t find in the docs ( [Gizmos | Babylon.js Documentation (babylonjs.com)](https://doc.babylonjs.com/divingDeeper/mesh/gizmo)). By searching playgrounds I think you would just need to attach a light to it with a ref.

```auto
import React, { useRef } from 'react';

const GizmoLightComponent = () => {
  // useRef<Nullable<Light>>(null) in TypeScript
  const lightRef = useRef(null);
  return (
    <directionalLight ref={lightRef} .../>
    <lightGizmo light={lightRef.current} ... />
  )
}

```

Does that work? I saw in the constructor that it creates it’s own `attachedMesh`, so the reconciler will try to attach it to a mesh in the scene graph - we may need a custom prop to indicate not to do so. Something like

```auto
<lightGizmo ... autoAttach={false} />

```

---

<div class="post-metadata">

### Author: ![Maxx](https://avatars.discourse-cdn.com/v4/letter/m/5fc32e/32.png) [@Maxx](https://forum.babylonjs.com/u/Maxx)
#### Post date: [August 23, 2021, 7:44am UTC](https://forum.babylonjs.com/t/how-can-i-add-lightgizmo-on-react-babylonjs/23228/4 "2021-08-23T07:44:23Z")

</div>

thank you for reply @brianzinn

i try like this

```auto
<utilityLayerRenderer>
    <directionalLight ref={DirectionalLightRef} ...>
       {lightRefInfo && (
                    <lightGizmo
                      key="lightGizmo"
                      light={lightRefInfo}
                      attachedMesh={modelMeshRef}
                    />
                  )}
   </directionalLight>
</utilityLayerRenderer>

```

there is no error, but lightGizmo also does not appear

it may be required autoAttach prop

how can i add autoAttach customProp to lightGizmo

if not, is there anything i try on this situation ??

---

<div class="post-metadata">

### Author: ![brianzinn](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brianzinn/32/28013_2.png) [@brianzinn](https://forum.babylonjs.com/u/brianzinn)
#### Post date: [September 7, 2021, 11:32pm UTC](https://forum.babylonjs.com/t/how-can-i-add-lightgizmo-on-react-babylonjs/23228/5 "2021-09-07T23:32:52Z")

</div>

hi Maxx. Sorry, but I have been on vacation. This is fixed in 3.0.24, which was released today. Here is a code sandbox:  
[stoic-star-mj51p - CodeSandbox](https://codesandbox.io/s/stoic-star-mj51p?file=/src/App.tsx)

![lightGizmo](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/5/f/5fc71851e71281f944459bcd57d8492a8df444cf.gif)

You can use `useRef` as well. Here is the part of the scene you need:

```auto
<directionalLight name='red-light' direction={...} ref={setLightRef}>
  <shadowGenerator mapSize={1024} shadowCastChildren>
    <icoSphere name='ico1' position={new Vector3(0, 2, 0)} />
  </shadowGenerator>
</directionalLight>

<utilityLayerRenderer>
  <gizmoManager thickness={3} rotationGizmoEnabled>
    <sphere name="sunMesh" diameter={1}>
      <lightGizmo light={lightRef} updateScale />
    </sphere>
  </gizmoManager>
</utilityLayerRenderer>

```

If you are declaratively assigning a mesh to the lightGizmo it will work, but don’t assign a node as it will fail with runtime error when the light is assigned.