@mobielnl/elements 0.0.1 → 0.0.3
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 +37 -6
- package/dist/elements.css +1 -1
- package/dist/elements.js +1 -1
- package/dist/elements.umd.cjs +44 -44
- package/dist/{index-C-wKqSMk.js → index-CreNKZHw.js} +1 -1
- package/dist/{index-CSe9vMR8.js → index-DD6DvdOQ.js} +3469 -3338
- package/dist/index.d.ts +155 -11
- package/package.json +16 -3
package/README.md
CHANGED
|
@@ -1,11 +1,21 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Mobiel.nl Elements
|
|
2
2
|
|
|
3
|
-
A React component library built with Vite library mode. Ships ES and UMD bundles plus TypeScript types and a
|
|
3
|
+
A React component library built with Vite library mode. Ships ES and UMD bundles plus TypeScript types and a Mobiel.nl theme.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Documentation
|
|
6
|
+
|
|
7
|
+
To view the available elements and changelog, check out our [Documentation](https://elements.mobiel.nl).
|
|
8
|
+
|
|
9
|
+
## Contributing
|
|
10
|
+
|
|
11
|
+
Only Websend developers can currently contribute. See [Contributing Guide](https://elements.mobiel.nl/?path=/docs/contributing--docs).
|
|
12
|
+
|
|
13
|
+
## Installation
|
|
6
14
|
|
|
7
15
|
### For React projects
|
|
8
16
|
|
|
17
|
+
You will need Node.js 18+ and React 18+.
|
|
18
|
+
|
|
9
19
|
#### Install with your preferred package manager (pnpm, npm, yarn, bun, etc.)
|
|
10
20
|
|
|
11
21
|
```bash
|
|
@@ -35,10 +45,31 @@ All CSS styling is scoped to this `<ElementsRoot>` wrapper, which is essentially
|
|
|
35
45
|
|
|
36
46
|
Components nested within this wrapper will inherit the styling. This is done so that it does not overwrite other CSS styling.
|
|
37
47
|
|
|
48
|
+
#### Custom Styling with Tailwind CSS
|
|
49
|
+
|
|
50
|
+
You can customize component styling using the `classNames` prop.
|
|
51
|
+
|
|
52
|
+
```tsx
|
|
53
|
+
import { ProductResults, type ProductResultsClassNames } from "@mobielnl/elements";
|
|
54
|
+
|
|
55
|
+
const customClassNames: ProductResultsClassNames = {
|
|
56
|
+
propositionCard: {
|
|
57
|
+
title: "text-5xl font-extrabold text-secondary",
|
|
58
|
+
pricingSection: {
|
|
59
|
+
monthlyFeeValue: "text-red-500",
|
|
60
|
+
},
|
|
61
|
+
},
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
export default function Example() {
|
|
65
|
+
return <ProductResults filterOptions={[]} classNames={customClassNames} />;
|
|
66
|
+
}
|
|
67
|
+
```
|
|
68
|
+
|
|
38
69
|
### For non-React projects
|
|
39
70
|
|
|
40
71
|
```html
|
|
41
|
-
<!
|
|
72
|
+
<!DOCTYPE html>
|
|
42
73
|
<html lang="en">
|
|
43
74
|
<head>
|
|
44
75
|
<meta charset="utf-8" />
|
|
@@ -68,14 +99,14 @@ Components nested within this wrapper will inherit the styling. This is done so
|
|
|
68
99
|
<!-- Render MobielNL Button -->
|
|
69
100
|
<script>
|
|
70
101
|
ReactDOM.createRoot(document.getElementById("mobielnl-product-results")).render(
|
|
71
|
-
React.createElement(Elements.ProductResults, { filterOptions: [] })
|
|
102
|
+
React.createElement(Elements.ProductResults, { filterOptions: [] })
|
|
72
103
|
);
|
|
73
104
|
</script>
|
|
74
105
|
</body>
|
|
75
106
|
</html>
|
|
76
107
|
```
|
|
77
108
|
|
|
78
|
-
## Theme
|
|
109
|
+
## Theme & Styling
|
|
79
110
|
|
|
80
111
|
Our compiled stylesheet uses HeroUI-compatible CSS custom properties.
|
|
81
112
|
|