@spteck/react-controls-v2 2.2.6 → 2.2.7
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 +41 -0
- package/dist/components/worldMap/data.d.ts +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -49,6 +49,46 @@ npm install @spteck/react-controls-v2 @spteck/react-controls-v2-spfx-adapter
|
|
|
49
49
|
|
|
50
50
|
---
|
|
51
51
|
|
|
52
|
+
## Recommended App Root
|
|
53
|
+
|
|
54
|
+
Use `FluentUIProvider` at the top of your app to apply the Fluent UI theme, scope generated IDs, and ensure dialogs, menus, and other portals inherit the same styles.
|
|
55
|
+
|
|
56
|
+
```tsx
|
|
57
|
+
import * as React from 'react';
|
|
58
|
+
import { webDarkTheme, webLightTheme } from '@fluentui/react-components';
|
|
59
|
+
import { FluentUIProvider } from '@spteck/react-controls-v2';
|
|
60
|
+
|
|
61
|
+
export function App() {
|
|
62
|
+
const [isDark, setIsDark] = React.useState(false);
|
|
63
|
+
const theme = isDark ? webDarkTheme : webLightTheme;
|
|
64
|
+
|
|
65
|
+
return (
|
|
66
|
+
<FluentUIProvider
|
|
67
|
+
theme={theme}
|
|
68
|
+
applicationName="contoso-app"
|
|
69
|
+
applyStylesToPortals={true}
|
|
70
|
+
targetDocument={document}
|
|
71
|
+
>
|
|
72
|
+
<YourRoutes />
|
|
73
|
+
</FluentUIProvider>
|
|
74
|
+
);
|
|
75
|
+
}
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
If you are also using app context and localization, the recommended provider order is:
|
|
79
|
+
|
|
80
|
+
```tsx
|
|
81
|
+
<FluentUIProvider theme={theme} applicationName="contoso-app">
|
|
82
|
+
<UniversalProvider context={appContext}>
|
|
83
|
+
<LocalizationProvider locale={locale}>
|
|
84
|
+
<App />
|
|
85
|
+
</LocalizationProvider>
|
|
86
|
+
</UniversalProvider>
|
|
87
|
+
</FluentUIProvider>
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
---
|
|
91
|
+
|
|
52
92
|
## Available Controls
|
|
53
93
|
|
|
54
94
|
### Layout & Structure
|
|
@@ -163,6 +203,7 @@ npm install @spteck/react-controls-v2 @spteck/react-controls-v2-spfx-adapter
|
|
|
163
203
|
| Component | Description |
|
|
164
204
|
|-----------|-------------|
|
|
165
205
|
| `UniversalProvider` | Root context provider for the whole app |
|
|
206
|
+
| `FluentUIProvider` | Fluent UI theme root with portal styling and scoped IDs |
|
|
166
207
|
| `BaseComponentProps` | Shared responsive spacing/sizing interface |
|
|
167
208
|
| `LocalStorageProvider` | `IStorageProvider` implementation using localStorage |
|
|
168
209
|
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
/** Country enriched with map coordinates. */
|
|
1
|
+
/** Country enriched with map coordinates in [longitude, latitude] order. */
|
|
2
2
|
export interface data {
|
|
3
3
|
id: string;
|
|
4
4
|
name: string;
|
|
5
5
|
imageUrl: string;
|
|
6
6
|
link: string;
|
|
7
|
-
coordinates: [number, number];
|
|
7
|
+
coordinates: [longitude: number, latitude: number];
|
|
8
8
|
}
|
|
9
9
|
//# sourceMappingURL=data.d.ts.map
|