@febv/react-island-components 0.1.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +78 -0
- package/dist/react-island-components.es.js +23875 -0
- package/dist/react-island-components.umd.js +260 -0
- package/package.json +42 -0
package/README.md
ADDED
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
# @febv/react-island-components
|
|
2
|
+
|
|
3
|
+
Reusable React islands with Web Component wrappers for framework-agnostic usage.
|
|
4
|
+
|
|
5
|
+
## Quick start
|
|
6
|
+
|
|
7
|
+
```ts
|
|
8
|
+
import {
|
|
9
|
+
mountComponent,
|
|
10
|
+
registerReactIslandElements,
|
|
11
|
+
updateComponent,
|
|
12
|
+
} from '@febv/react-island-components';
|
|
13
|
+
|
|
14
|
+
registerReactIslandElements();
|
|
15
|
+
|
|
16
|
+
// Optional imperative API for frameworks that prefer mount/update/unmount.
|
|
17
|
+
const container = document.getElementById('host-el');
|
|
18
|
+
if (container) {
|
|
19
|
+
mountComponent('Button', container, { label: 'Save' }, { eventKey: 'save-btn' });
|
|
20
|
+
updateComponent(container, { disabled: false });
|
|
21
|
+
}
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
Then use tags:
|
|
25
|
+
|
|
26
|
+
- `<ri-button>`
|
|
27
|
+
- `<ri-card>`
|
|
28
|
+
- `<ri-modal>`
|
|
29
|
+
|
|
30
|
+
## Vue 2 usage
|
|
31
|
+
|
|
32
|
+
```vue
|
|
33
|
+
<template>
|
|
34
|
+
<div>
|
|
35
|
+
<ri-button
|
|
36
|
+
ref="saveButton"
|
|
37
|
+
label="Save"
|
|
38
|
+
event-key="save-btn"
|
|
39
|
+
@react-island:Button:click="onButtonClick"
|
|
40
|
+
/>
|
|
41
|
+
</div>
|
|
42
|
+
</template>
|
|
43
|
+
|
|
44
|
+
<script>
|
|
45
|
+
export default {
|
|
46
|
+
methods: {
|
|
47
|
+
onButtonClick(event) {
|
|
48
|
+
const detail = event.detail;
|
|
49
|
+
console.log(detail.payload);
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
mounted() {
|
|
53
|
+
// Complex props should be passed via property assignment
|
|
54
|
+
this.$refs.saveButton.props = {
|
|
55
|
+
label: 'Save changes',
|
|
56
|
+
disabled: false
|
|
57
|
+
};
|
|
58
|
+
}
|
|
59
|
+
};
|
|
60
|
+
</script>
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## Other frameworks
|
|
64
|
+
|
|
65
|
+
- **Vue 3**: use tags directly and listen to custom events in template.
|
|
66
|
+
- **Angular**: add custom tags in template and use `(react-island:Button:click)` listeners.
|
|
67
|
+
- **React host**: use imperative API (`mountComponent/updateComponent/unmountComponent`) in `useEffect`.
|
|
68
|
+
- **Vanilla JS**: use either tags or imperative API.
|
|
69
|
+
|
|
70
|
+
## Extending with new components
|
|
71
|
+
|
|
72
|
+
1. Add React component in `src/components`.
|
|
73
|
+
2. Add one entry in `src/registry/index.ts` with:
|
|
74
|
+
- component contract (`propsSchema`, `events`, `eventBindings`)
|
|
75
|
+
- tag config (`tagName`, `observedAttributes`)
|
|
76
|
+
3. Call `registerReactIslandElements()` as usual (new components auto-register).
|
|
77
|
+
|
|
78
|
+
That is all. No other framework integration code is needed.
|