|
| 1 | +--- |
| 2 | +title: <prefab> |
| 3 | +layout: API |
| 4 | +--- |
| 5 | + |
| 6 | +`<prefab>` allows to instantiate a custom prefab as a React Component. |
| 7 | + |
| 8 | +<Sandpack> |
| 9 | + |
| 10 | +```js |
| 11 | +export default function App() { |
| 12 | + // Load the prefab using globals |
| 13 | + const { prefab } = useGlobals(); |
| 14 | + // or alternatively you can load the prefab from resources |
| 15 | + // const prefab = useMemo(() => Interop.UnityEngine.Resources.Load('MyPrefab') as UnityEngine.GameObject, []); |
| 16 | + |
| 17 | + return <prefab target={prefab} />; |
| 18 | +}; |
| 19 | +``` |
| 20 | + |
| 21 | +</Sandpack> |
| 22 | + |
| 23 | +### Lifecycle events and properties |
| 24 | + |
| 25 | +`<prefab>` component instantiates the prefab, then searches for a component implementing the `IPrefabTarget` interface and calls the `Mount`, `UnMount` lifecycle hooks with the prefab instance. |
| 26 | + |
| 27 | +You can use them to handle custom logic, events, and properties passed to the prefab. |
| 28 | + |
| 29 | +#### Example of a custom prefab target component: |
| 30 | +```csharp |
| 31 | +public class MyComponentPrefabTarget : MonoBehaviour, IPrefabTarget |
| 32 | +{ |
| 33 | + PrefabComponent Component { get; set; } |
| 34 | + |
| 35 | + public Action AddEventListener(string eventName, Callback callback) |
| 36 | + { |
| 37 | + // Here you can handle custom events passed to the prefab. |
| 38 | + return null; |
| 39 | + } |
| 40 | + |
| 41 | + public void Mount(PrefabComponent cmp) |
| 42 | + { |
| 43 | + Debug.Log("Mounting MyComponentPrefabTarget"); |
| 44 | + // Saving the reference of cmp to use it later |
| 45 | + // For instance you can use it to emit custom events to React `Component.FireEvent("onSomething", value)` |
| 46 | + Component = cmp; |
| 47 | + } |
| 48 | + |
| 49 | + public bool SetProperty(string propertyName, object value) |
| 50 | + { |
| 51 | + // Here you can handle custom properties passed to the prefab |
| 52 | + switch (propertyName) |
| 53 | + { |
| 54 | + case "myprop": |
| 55 | + Debug.Log("Doing something with myprop"); |
| 56 | + return true; |
| 57 | + } |
| 58 | + return false; |
| 59 | + } |
| 60 | + |
| 61 | + public void Unmount(PrefabComponent cmp) |
| 62 | + { |
| 63 | + Debug.Log("Unmounting MyComponentPrefabTarget"); |
| 64 | + Component = null; |
| 65 | + } |
| 66 | +} |
| 67 | +``` |
| 68 | + |
| 69 | +##### Example of a prefab with a custom target component: |
| 70 | +```js |
| 71 | + |
| 72 | +export default function App() { |
| 73 | + const prefab = useMemo(() => Interop.UnityEngine.Resources.Load('MyPrefab') as UnityEngine.GameObject, []); |
| 74 | + |
| 75 | + return ( |
| 76 | + <prefab |
| 77 | + target={prefab} |
| 78 | + custom={{ |
| 79 | + // This will be passed to the prefab target component |
| 80 | + myprop: 'something' |
| 81 | + }} |
| 82 | + // This will be invoked when `FireEvent` is called from the prefab target component |
| 83 | + onSomething={val => console.log('Something happened', val)} |
| 84 | + /> |
| 85 | + ); |
| 86 | +}; |
| 87 | +``` |
0 commit comments