react-headings 3.0.14 → 3.0.15
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 +66 -37
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -29,13 +29,13 @@ References:
|
|
|
29
29
|
|
|
30
30
|
## Highlights
|
|
31
31
|
|
|
32
|
-
-
|
|
33
|
-
- Focused on developer experience
|
|
34
|
-
- Fully tested
|
|
35
|
-
- Typed with TypeScript
|
|
36
|
-
- Works with component libraries (Material UI, etc.)
|
|
32
|
+
- Improves SEO and accessibility
|
|
37
33
|
- Supports server-side rendering
|
|
38
34
|
- Under 1 kB minified & gzipped
|
|
35
|
+
- Typed with TypeScript
|
|
36
|
+
- Fully tested
|
|
37
|
+
- Works with any CSS solutions (Tailwind, CSS-in-JS, etc.)
|
|
38
|
+
- Plays nicely with component librairies (Material UI, etc.)
|
|
39
39
|
- Follows [semantic versioning](https://semver.org/)
|
|
40
40
|
|
|
41
41
|
## Installation
|
|
@@ -53,23 +53,38 @@ yarn add react-headings
|
|
|
53
53
|
```jsx
|
|
54
54
|
import React from "react";
|
|
55
55
|
import { H, Section } from "react-headings";
|
|
56
|
-
import MyIcon from "./MyIcon";
|
|
57
56
|
|
|
58
|
-
function
|
|
57
|
+
function App() {
|
|
59
58
|
return (
|
|
60
|
-
<Section
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
<H>My hx</H>
|
|
65
|
-
</div>
|
|
66
|
-
}
|
|
67
|
-
>
|
|
59
|
+
<Section component={<H>My hx</H>}>
|
|
60
|
+
<div>...</div>
|
|
61
|
+
<div>...</div>
|
|
62
|
+
<div>...</div>
|
|
68
63
|
<Section component={<H>My hx+1</H>}>
|
|
69
|
-
<
|
|
64
|
+
<div>...</div>
|
|
65
|
+
<div>...</div>
|
|
66
|
+
<div>...</div>
|
|
70
67
|
</Section>
|
|
68
|
+
</Section>
|
|
69
|
+
);
|
|
70
|
+
}
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
### Advanced structure
|
|
74
|
+
|
|
75
|
+
Child components inherit the current level of their parent:
|
|
76
|
+
|
|
77
|
+
```jsx
|
|
78
|
+
import React from "react";
|
|
79
|
+
import { H, Section } from "react-headings";
|
|
80
|
+
|
|
81
|
+
function ParentComponent() {
|
|
82
|
+
return (
|
|
83
|
+
<Section component={<H>My hx</H>}>
|
|
71
84
|
<Section component={<H>My hx+1</H>}>
|
|
72
|
-
<
|
|
85
|
+
<Section component={<H>My hx+2</H>}>
|
|
86
|
+
<ChildComponent />
|
|
87
|
+
</Section>
|
|
73
88
|
</Section>
|
|
74
89
|
</Section>
|
|
75
90
|
);
|
|
@@ -77,49 +92,63 @@ function ParentComponent() {
|
|
|
77
92
|
|
|
78
93
|
function ChildComponent() {
|
|
79
94
|
return (
|
|
80
|
-
<Section component={<H>My
|
|
81
|
-
<
|
|
95
|
+
<Section component={<H>My hy</H>}>
|
|
96
|
+
{/* The following heading would be a <h5> in the current context */}
|
|
97
|
+
<Section component={<H>My hy+1</H>}>
|
|
98
|
+
<p>...</p>
|
|
99
|
+
</Section>
|
|
82
100
|
</Section>
|
|
83
101
|
);
|
|
84
102
|
}
|
|
85
103
|
```
|
|
86
104
|
|
|
87
|
-
###
|
|
88
|
-
|
|
89
|
-
You can render custom headings anywhere by using either the `useLevel` hook or the `H` component.
|
|
105
|
+
### Styling
|
|
90
106
|
|
|
91
|
-
|
|
107
|
+
A heading can be styled like any ordinary `<hx>` element since it accepts all the same props:
|
|
92
108
|
|
|
93
109
|
```jsx
|
|
94
110
|
import React from "react";
|
|
95
|
-
import {
|
|
111
|
+
import { H, Section } from "react-headings";
|
|
96
112
|
|
|
97
113
|
function App() {
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
114
|
+
return (
|
|
115
|
+
<Section component={<H className="my-class">My hx</H>}>
|
|
116
|
+
...
|
|
117
|
+
</Section>
|
|
118
|
+
);
|
|
101
119
|
}
|
|
102
120
|
```
|
|
103
121
|
|
|
104
|
-
|
|
122
|
+
### Custom heading
|
|
123
|
+
|
|
124
|
+
A heading can be as complex as we want:
|
|
105
125
|
|
|
106
126
|
```jsx
|
|
107
127
|
import React from "react";
|
|
108
|
-
import { H } from "react-headings";
|
|
128
|
+
import { H, Section } from "react-headings";
|
|
129
|
+
import MyIcon from "./MyIcon";
|
|
109
130
|
|
|
110
131
|
function App() {
|
|
111
132
|
return (
|
|
112
|
-
<
|
|
113
|
-
|
|
114
|
-
<
|
|
115
|
-
|
|
116
|
-
|
|
133
|
+
<Section
|
|
134
|
+
component={
|
|
135
|
+
<div className="my-div">
|
|
136
|
+
<MyIcon className="my-icon" />
|
|
137
|
+
<H className="my-heading">My hx</H>
|
|
138
|
+
</div>
|
|
139
|
+
}
|
|
140
|
+
>
|
|
141
|
+
<div>...</div>
|
|
142
|
+
<div>...</div>
|
|
143
|
+
<div>...</div>
|
|
144
|
+
</Section>
|
|
117
145
|
);
|
|
118
146
|
}
|
|
119
147
|
```
|
|
120
148
|
|
|
121
149
|
### Using component librairies
|
|
122
150
|
|
|
151
|
+
Leveraging `Component` and `level` from the context allows the use of component librairies.
|
|
123
152
|
Here's an example with [Material UI](https://material-ui.com/api/typography/):
|
|
124
153
|
|
|
125
154
|
```jsx
|
|
@@ -134,8 +163,6 @@ function MyHeading(props) {
|
|
|
134
163
|
}
|
|
135
164
|
```
|
|
136
165
|
|
|
137
|
-
Leveraging `Component` and `level` from the context should make implementing other librairies pretty straightforward.
|
|
138
|
-
|
|
139
166
|
## API
|
|
140
167
|
|
|
141
168
|
### `<H>` component
|
|
@@ -187,7 +214,9 @@ import { Section, H } from "react-headings";
|
|
|
187
214
|
|
|
188
215
|
function Example1() {
|
|
189
216
|
return (
|
|
190
|
-
<Section component={<H>This is my title</H>}>
|
|
217
|
+
<Section component={<H>This is my title</H>}>
|
|
218
|
+
This is my content
|
|
219
|
+
</Section>
|
|
191
220
|
);
|
|
192
221
|
}
|
|
193
222
|
|