Skip to content

Commit 2d28130

Browse files
committed
docs(prefab): documenting <prefab> component
1 parent ff2c79e commit 2d28130

File tree

2 files changed

+91
-0
lines changed

2 files changed

+91
-0
lines changed

Diff for: src/content/reference/components/prefab.md

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
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+
```

Diff for: src/sidebarReference.json

+4
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,10 @@
8181
"title": "style",
8282
"path": "/reference/components/style"
8383
},
84+
{
85+
"title": "prefab",
86+
"path": "/reference/components/prefab"
87+
},
8488
{
8589
"title": "svg",
8690
"path": "/reference/components/svg"

0 commit comments

Comments
 (0)