react-headings 4.0.0-next.3 → 4.0.1
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 +23 -15
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
</a>
|
|
12
12
|
</p>
|
|
13
13
|
|
|
14
|
-
> Never write
|
|
14
|
+
> Never write `<h1>`–`<h6>` again.
|
|
15
15
|
|
|
16
16
|
Hardcoded heading levels break accessibility and SEO when components are reused. React Headings fixes this by computing each level from your component tree.
|
|
17
17
|
|
|
@@ -39,13 +39,13 @@ import { Heading, HeadingLevel } from "react-headings";
|
|
|
39
39
|
function Page() {
|
|
40
40
|
return (
|
|
41
41
|
<>
|
|
42
|
-
<Heading>Star Wars</Heading> {/* h1 */}
|
|
42
|
+
<Heading>Star Wars</Heading> {/* <h1> */}
|
|
43
43
|
<HeadingLevel>
|
|
44
|
-
<Heading>Characters</Heading> {/* h2 */}
|
|
44
|
+
<Heading>Characters</Heading> {/* <h2> */}
|
|
45
45
|
<HeadingLevel>
|
|
46
|
-
<Section title="Luke" /> {/* h3 */}
|
|
47
|
-
<Section title="Leia" /> {/* h3 */}
|
|
48
|
-
<Section title="Han Solo" /> {/* h3 */}
|
|
46
|
+
<Section title="Luke" /> {/* <h3> */}
|
|
47
|
+
<Section title="Leia" /> {/* <h3> */}
|
|
48
|
+
<Section title="Han Solo" /> {/* <h3> */}
|
|
49
49
|
</HeadingLevel>
|
|
50
50
|
</HeadingLevel>
|
|
51
51
|
</>
|
|
@@ -62,23 +62,29 @@ function Section({ title, children }) {
|
|
|
62
62
|
}
|
|
63
63
|
```
|
|
64
64
|
|
|
65
|
-
`Section` doesn't know its level: it renders
|
|
65
|
+
`Section` doesn't know its level: it renders `<h3>` here.
|
|
66
66
|
|
|
67
67
|
### Dialogs
|
|
68
68
|
|
|
69
|
-
Portaled elements, like dialogs, aren't part of the page outline. Use `level` to start their headings at
|
|
69
|
+
Portaled elements, like dialogs, aren't part of the page outline. Use `level` to start their headings at `<h1>`:
|
|
70
70
|
|
|
71
71
|
```tsx
|
|
72
72
|
<Dialog>
|
|
73
73
|
<HeadingLevel level={1}>
|
|
74
|
-
<Heading>Delete file?</Heading> {/* h1 */}
|
|
74
|
+
<Heading>Delete file?</Heading> {/* <h1> */}
|
|
75
75
|
</HeadingLevel>
|
|
76
76
|
</Dialog>
|
|
77
77
|
```
|
|
78
78
|
|
|
79
79
|
### Styling
|
|
80
80
|
|
|
81
|
-
React Headings only picks the tag. Style headings however you like
|
|
81
|
+
React Headings only picks the tag. Style headings however you like:
|
|
82
|
+
|
|
83
|
+
```tsx
|
|
84
|
+
<Heading className="text-lg">Title</Heading>
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
Or use `render` for component libraries:
|
|
82
88
|
|
|
83
89
|
```tsx
|
|
84
90
|
<Heading render={(props, { tag }) => <Text as={tag} size="lg" {...props} />}>
|
|
@@ -88,21 +94,23 @@ React Headings only picks the tag. Style headings however you like, or use `rend
|
|
|
88
94
|
|
|
89
95
|
## API
|
|
90
96
|
|
|
91
|
-
###
|
|
97
|
+
### `<Heading>`
|
|
92
98
|
|
|
93
|
-
Renders
|
|
99
|
+
Renders `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, or `<h6>` based on the current level. `<h1>` by default.
|
|
94
100
|
|
|
95
|
-
Accepts every
|
|
101
|
+
Accepts every `<h1>` prop and a `ref`, plus:
|
|
96
102
|
|
|
97
103
|
| Prop | Type | Description |
|
|
98
104
|
| -------- | -------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
|
|
99
105
|
| `render` | `(props, { level, tag }) => ReactElement` | Renders your own element. Spread `props` on it (includes `children` and `ref`). |
|
|
100
106
|
|
|
101
|
-
###
|
|
107
|
+
### `<HeadingLevel>`
|
|
108
|
+
|
|
109
|
+
Moves the headings inside one level deeper.
|
|
102
110
|
|
|
103
111
|
| Prop | Type | Default | Description |
|
|
104
112
|
| -------- | -------- | ------- | ------------------------------------------------ |
|
|
105
|
-
| `offset` | `number` | `1` | Levels added to headings inside.
|
|
113
|
+
| `offset` | `number` | `1` | Levels added to headings inside. Rarely used. |
|
|
106
114
|
| `level` | `number` | | Level of headings inside, ignoring parents. |
|
|
107
115
|
|
|
108
116
|
Pass `offset` or `level`, not both. Nested offsets add up. `offset={0}` adds nothing, which is useful for conditional nesting.
|