@public-ui/react 2.0.0-rc.12 → 2.0.0-rc.13
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 +43 -4
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,7 +1,46 @@
|
|
|
1
|
-
# React-Adapter
|
|
1
|
+
# KoliBri - React-Adapter
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
## Motivation
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Provide an adapter for [React](https://reactjs.org) to use the KoliBri components.
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
You can install the adapter with `npm`, `pnpm` or `yarn`:
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm i -g @public-ui/react
|
|
13
|
+
pnpm i -g @public-ui/react
|
|
14
|
+
yarn add -g @public-ui/react
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Usage
|
|
18
|
+
|
|
19
|
+
First, initialize KoliBri with a [theme](https://github.com/public-ui/kolibri/tree/develop/packages/themes) and create a React root:
|
|
20
|
+
|
|
21
|
+
```ts
|
|
22
|
+
import { defineCustomElements } from '@public-ui/components/dist/loader';
|
|
23
|
+
import { register } from '@public-ui/components';
|
|
24
|
+
import { DEFAULT } from '@public-ui/themes';
|
|
25
|
+
|
|
26
|
+
register(DEFAULT, defineCustomElements)
|
|
27
|
+
.then(() => {
|
|
28
|
+
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
|
|
29
|
+
<React.StrictMode>
|
|
30
|
+
<App />
|
|
31
|
+
</React.StrictMode>
|
|
32
|
+
);
|
|
33
|
+
})
|
|
34
|
+
.catch((error) => {
|
|
35
|
+
/* Handle errors */
|
|
36
|
+
});
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
Then, you can import any component from `@public-ui/react` and render it within React components:
|
|
40
|
+
|
|
41
|
+
```tsx
|
|
42
|
+
import React, { FC } from 'react';
|
|
43
|
+
import { KolButton } from '@public-ui/react';
|
|
44
|
+
|
|
45
|
+
export default (): FC => <KolButton _label="Hello World" />;
|
|
46
|
+
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@public-ui/react",
|
|
3
|
-
"version": "2.0.0-rc.
|
|
3
|
+
"version": "2.0.0-rc.13",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"homepage": "https://public-ui.github.io",
|
|
6
6
|
"repository": "https://github.com/public-ui/kolibri",
|
|
@@ -42,12 +42,12 @@
|
|
|
42
42
|
"react"
|
|
43
43
|
],
|
|
44
44
|
"devDependencies": {
|
|
45
|
-
"@public-ui/components": "2.0.0-rc.
|
|
45
|
+
"@public-ui/components": "2.0.0-rc.13",
|
|
46
46
|
"@types/minimatch": "5.1.2",
|
|
47
47
|
"@types/minimist": "1.2.5",
|
|
48
48
|
"@types/node": "ts5.3",
|
|
49
49
|
"@types/normalize-package-data": "2.4.4",
|
|
50
|
-
"@types/react": "18.2.
|
|
50
|
+
"@types/react": "18.2.41",
|
|
51
51
|
"@types/react-dom": "18.2.17",
|
|
52
52
|
"react": "18.2.0",
|
|
53
53
|
"react-dom": "18.2.0",
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"unbuild": "1.2.1"
|
|
56
56
|
},
|
|
57
57
|
"peerDependencies": {
|
|
58
|
-
"@public-ui/components": "2.0.0-rc.
|
|
58
|
+
"@public-ui/components": "2.0.0-rc.13",
|
|
59
59
|
"react": ">=16.14.0",
|
|
60
60
|
"react-dom": ">=16.14.0"
|
|
61
61
|
},
|