@synergy-design-system/react 2.17.0 → 2.18.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
CHANGED
|
@@ -7,6 +7,10 @@ This package aims for an improved UX when used in React applications:
|
|
|
7
7
|
- Auto-completion
|
|
8
8
|
- Event handling
|
|
9
9
|
|
|
10
|
+
> Note that with react@19 and above, react has full support for web-components.
|
|
11
|
+
> For those react versions, this package can be used by loading custom types,
|
|
12
|
+
> you **do not need to use the exported components** anymore.
|
|
13
|
+
|
|
10
14
|
## Getting started
|
|
11
15
|
|
|
12
16
|
### 1. Package installation
|
|
@@ -54,14 +58,63 @@ createRoot(document.getElementById("root")!).render(
|
|
|
54
58
|
);
|
|
55
59
|
```
|
|
56
60
|
|
|
57
|
-
### 3.
|
|
61
|
+
### 3. Using native Synergy components in react (only for react >= 19.0.0) in Typescript projects
|
|
62
|
+
|
|
63
|
+
React@19 finally shipped with official support for web components.
|
|
64
|
+
With this version of react, you are free to **use our native web components** directly in your application.
|
|
65
|
+
|
|
66
|
+
However, you will likely receive errors because our elements are not known to React as available (in react speech `intrinsic`) elements. This will also occur when using typescript. For this reason, we provide **type only wrappers** for all versions of react from version 19.0.0 onward.
|
|
67
|
+
|
|
68
|
+
Using synergy in a typescript project with React@19 can be easily achieved via one line of code. There is no need to import `@synergy-design-system/react` in your code directly anymore!
|
|
69
|
+
|
|
70
|
+
Just add the following definition to your projects typescript configuration file (e.g. `tsconfig.json`):
|
|
71
|
+
|
|
72
|
+
```json
|
|
73
|
+
{
|
|
74
|
+
"compilerOptions": {
|
|
75
|
+
"types": ["@synergy-design-system/react/types/latest"]
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
This makes sure your project knows about our list of intrinsic elements. This will also enable **automatic type checks and auto completion for properties** for all synergy elements.
|
|
81
|
+
|
|
82
|
+
You may now use the components by importing them from the `@synergy-design-system/component` package and rendering them in a React component.
|
|
83
|
+
|
|
84
|
+
```tsx
|
|
85
|
+
// You may also load the complete bundle somewhere in your application,
|
|
86
|
+
// but directly including only needed components leads to smaller bundles.
|
|
87
|
+
import "@synergy-design-system/components/components/button/button.js";
|
|
88
|
+
import "@synergy-design-system/components/components/input/input.js";
|
|
89
|
+
|
|
90
|
+
export const MyButton = () => <syn-button type="submit">Submit me</syn-button>;
|
|
91
|
+
export const MyInput = () => (
|
|
92
|
+
<syn-input name="my-input" onsyn-change={e => console.log(e)} required />
|
|
93
|
+
);
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
#### 3.1. Migrating from synergies react wrappers to native components
|
|
97
|
+
|
|
98
|
+
1. First make sure you have react@19 or higher installed in your project.
|
|
99
|
+
2. Upgrade `@synergy-design-system/react` to the latest version.
|
|
100
|
+
3. Add the required types to your typescript configuration (`compilerOptions.types=['@synergy-design-system/react/types/latest']`).
|
|
101
|
+
4. Run typescript to verify everything is still fine.
|
|
102
|
+
5. Replace occurrences of the old synergy components with their native counterpart (e.g. `<SynButton>` should be exchanged for `<syn-button>`). When using native synergy components, make sure to double check on event names (e.g. `<SynInput onSynInput={e => null} />` will become `<syn-input onsyn-input={e => null} />`).
|
|
103
|
+
6. When you are done, remove all occurrences of `@synergy-design-system/react` from your code.
|
|
104
|
+
|
|
105
|
+
---
|
|
106
|
+
|
|
107
|
+
### 4. Using the lit wrappers (required for react < 19.0.0, optional for react >= 19.0.0)
|
|
58
108
|
|
|
59
109
|
You may now use the components by importing them from the `@synergy-design-system/react` package and rendering them in a React component.
|
|
60
110
|
|
|
61
111
|
```tsx
|
|
62
|
-
import { SynButton } from "@synergy-design-system/react";
|
|
112
|
+
import { SynButton, SynInput } from "@synergy-design-system/react";
|
|
63
113
|
|
|
64
114
|
export const MyButton = () => <SynButton type="submit">Submit me</SynButton>;
|
|
115
|
+
export const MyInput = () => (
|
|
116
|
+
<SynInput name="my-input" onSynChange={e => console.log(e)} required />
|
|
117
|
+
);
|
|
65
118
|
```
|
|
66
119
|
|
|
67
120
|
### 4. Usage of the components
|