@layout-lib/react 0.1.0 → 0.2.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 +69 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -24,7 +24,7 @@ export function App() {
|
|
|
24
24
|
```
|
|
25
25
|
|
|
26
26
|
<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>G</kbd> shows or hides the grid.
|
|
27
|
-
<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd>
|
|
27
|
+
<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> hides the settings panel outright, or brings it back. The panel's own button just folds it.
|
|
28
28
|
|
|
29
29
|
## Next.js (App Router)
|
|
30
30
|
|
|
@@ -46,6 +46,74 @@ export default function RootLayout({ children }) {
|
|
|
46
46
|
}
|
|
47
47
|
```
|
|
48
48
|
|
|
49
|
+
## Theming the panel
|
|
50
|
+
|
|
51
|
+
Ten built-in themes, plus `auto` (the default), which follows the operating system live: `dark`, `light`, `midnight`, `slate`, `solar`, `mono`, `blue`, `pink`, `red`, `green`.
|
|
52
|
+
|
|
53
|
+
```tsx
|
|
54
|
+
<LayoutGrid theme="midnight" />
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
Every colour can be replaced on top of the theme. Anything you leave out keeps the theme's value, and `accent` defaults to the grid colour:
|
|
58
|
+
|
|
59
|
+
```tsx
|
|
60
|
+
<LayoutGrid
|
|
61
|
+
theme="dark"
|
|
62
|
+
palette={{
|
|
63
|
+
bg: "#101828",
|
|
64
|
+
field: "#1d2939",
|
|
65
|
+
rail: "#344054",
|
|
66
|
+
line: "#1d2939",
|
|
67
|
+
text: "#f9fafb",
|
|
68
|
+
muted: "#98a2b3",
|
|
69
|
+
accent: "#7c5cff",
|
|
70
|
+
}}
|
|
71
|
+
/>
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
## Options
|
|
75
|
+
|
|
76
|
+
| Option | Default | Role |
|
|
77
|
+
|---|---|---|
|
|
78
|
+
| `breakpoints` | mobile / tablet / desktop | One grid per breakpoint. |
|
|
79
|
+
| `visible` | `false` | Show the grid on load. |
|
|
80
|
+
| `theme` | `"auto"` | Panel theme (see above). |
|
|
81
|
+
| `palette` | `{}` | Override any panel colour. |
|
|
82
|
+
| `panel` | `true` | Mount the settings panel. |
|
|
83
|
+
| `panelOpen` | `true` | Start with the panel unfolded. |
|
|
84
|
+
| `panelShown` | `true` | Start with the panel on screen. |
|
|
85
|
+
| `baseline` | `8` | Vertical rhythm in px, or `false`. |
|
|
86
|
+
| `color` | `"#ff3b6b"` | Grid colour. |
|
|
87
|
+
| `opacity` | `0.12` | Column opacity. |
|
|
88
|
+
| `toggleKey` | `"g"` | Toggle key, with Ctrl + Shift. |
|
|
89
|
+
| `panelKey` | `"p"` | Panel hide key, with Ctrl + Shift. |
|
|
90
|
+
| `persist` | `true` | Remember tweaks in `localStorage`. |
|
|
91
|
+
| `storageKey` | `"layout-lib:overlay"` | Storage key. |
|
|
92
|
+
| `zIndex` | `2147483000` | Above everything, by default. |
|
|
93
|
+
| `container` | `document.body` | Where the shadow host is appended. |
|
|
94
|
+
| `enabled` | dev only | Force the overlay on or off. |
|
|
95
|
+
|
|
96
|
+
## Your config, versioned
|
|
97
|
+
|
|
98
|
+
Tune the grid with the mouse, hit "copy config", paste the result into your repo:
|
|
99
|
+
|
|
100
|
+
```ts
|
|
101
|
+
// layout.config.ts
|
|
102
|
+
import type { Breakpoint } from "@layout-lib/core";
|
|
103
|
+
|
|
104
|
+
export const breakpoints: Breakpoint[] = [
|
|
105
|
+
{ name: "mobile", minWidth: 0, grid: { columns: 4, gutter: 16, margin: 16, maxWidth: null } },
|
|
106
|
+
{ name: "tablet", minWidth: 768, grid: { columns: 8, gutter: 24, margin: 32, maxWidth: null } },
|
|
107
|
+
{ name: "desktop", minWidth: 1280, grid: { columns: 12, gutter: 24, margin: 64, maxWidth: 1440 } },
|
|
108
|
+
];
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
```tsx
|
|
112
|
+
<LayoutGrid breakpoints={breakpoints} />
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
A breakpoint applies from its `minWidth` upwards, and `maxWidth: null` keeps the grid fluid. Panel tweaks are remembered in the browser, but the code wins: edit that file and the stored settings are dropped.
|
|
116
|
+
|
|
49
117
|
## Driving it from your code
|
|
50
118
|
|
|
51
119
|
```tsx
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@layout-lib/react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "Responsive layout grid overlay for React, Next.js and Vite.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
],
|
|
19
19
|
"sideEffects": false,
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@layout-lib/core": "0.
|
|
21
|
+
"@layout-lib/core": "0.2.0"
|
|
22
22
|
},
|
|
23
23
|
"peerDependencies": {
|
|
24
24
|
"react": ">=18"
|