Skip to content

Commit 2f5bec4

Browse files
committed
Add improved docs
1 parent 62bab26 commit 2f5bec4

File tree

1 file changed

+81
-21
lines changed

1 file changed

+81
-21
lines changed

readme.md

Lines changed: 81 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,58 @@
88
[![Backers][backers-badge]][collective]
99
[![Chat][chat-badge]][chat]
1010

11-
[**hast**][hast] utility to merge class names together.
11+
[hast][] utility to transform to set classes.
1212

13-
## Install
13+
## Contents
14+
15+
* [What is this?](#what-is-this)
16+
* [When should I use this?](#when-should-i-use-this)
17+
* [Install](#install)
18+
* [Use](#use)
19+
* [API](#api)
20+
* [`classnames(node, …conditionals)`](#classnamesnode-conditionals)
21+
* [`classnames(…conditionals)`](#classnamesconditionals)
22+
* [`Conditional`](#conditional)
23+
* [Types](#types)
24+
* [Compatibility](#compatibility)
25+
* [Security](#security)
26+
* [Related](#related)
27+
* [Contribute](#contribute)
28+
* [License](#license)
29+
30+
## What is this?
1431

15-
This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c):
16-
Node 12+ is needed to use it and it must be `import`ed instead of `require`d.
32+
This package is a utility that takes lets you more easily set class names on
33+
elements.
1734

18-
[npm][]:
35+
## When should I use this?
36+
37+
You can use this package when you find that that you’re repeating yourself
38+
a lot when working with classes in the syntax tree.
39+
40+
## Install
41+
42+
This package is [ESM only][esm].
43+
In Node.js (version 12.20+, 14.14+, 16.0+, 18.0+), install with [npm][]:
1944

2045
```sh
2146
npm install hast-util-classnames
2247
```
2348

49+
In Deno with [`esm.sh`][esmsh]:
50+
51+
```js
52+
import {classnames} from 'https://esm.sh/hast-util-classnames@2'
53+
```
54+
55+
In browsers with [`esm.sh`][esmsh]:
56+
57+
```html
58+
<script type="module">
59+
import {classnames} from 'https://esm.sh/hast-util-classnames@2?bundle'
60+
</script>
61+
```
62+
2463
## Use
2564

2665
```js
@@ -47,7 +86,7 @@ Yields:
4786

4887
## API
4988

50-
This package exports the following identifiers: `classnames`.
89+
This package exports the identifier `classnames`.
5190
There is no default export.
5291

5392
### `classnames(node, …conditionals)`
@@ -57,7 +96,7 @@ Utility to merge classes.
5796
If the first argument is a node it should be an [element][].
5897
All [conditionals][conditional] are merged with the current class names and with
5998
each other, and then set on the element.
60-
Finally, `node` is returned.
99+
Finally, the given `node` is returned.
61100

62101
### `classnames(…conditionals)`
63102

@@ -68,12 +107,25 @@ with each other, and then the resulting array is returned.
68107

69108
A value that is either:
70109

71-
* `string`One or more space-separated tokens (example: `alpha bravo`)
72-
* `number`Single token that is cast to string (example: `123`)
73-
* `Record<string, boolean>`Map where each field is a token, and each value
110+
* `string`one or more space-separated tokens (example: `alpha bravo`)
111+
* `number`single token that is cast to string (example: `123`)
112+
* `Record<string, boolean>`map where each field is a token, and each value
74113
turns it either on or off
75-
* `Array<Conditional>` — List of more conditionals
76-
* Other values are ignored
114+
* `Array<Conditional>` — list of more conditionals
115+
* other values are ignored
116+
117+
## Types
118+
119+
This package is fully typed with [TypeScript][].
120+
It exports the additional types `ConditionalPrimitive` (`string`/`number` form),
121+
`ConditionalMap` (object form), and `Conditional` (any form).
122+
123+
## Compatibility
124+
125+
Projects maintained by the unified collective are compatible with all maintained
126+
versions of Node.js.
127+
As of now, that is Node.js 12.20+, 14.14+, 16.0+, and 18.0+.
128+
Our projects sometimes work with older versions, but this is not guaranteed.
77129

78130
## Security
79131

@@ -86,18 +138,18 @@ Either do not use user input in `classnames` or use
86138
## Related
87139

88140
* [`hastscript`](https://github.com/syntax-tree/hastscript)
89-
Create hast trees
141+
create hast trees
90142
* [`hast-util-from-selector`](https://github.com/syntax-tree/hast-util-from-selector)
91-
Parse CSS selectors to hast nodes
143+
parse CSS selectors to hast nodes
92144
* [`hast-util-has-property`](https://github.com/syntax-tree/hast-util-has-property)
93-
Check if a node has a property
145+
check if a node has a property
94146
* [`hast-util-is-element`](https://github.com/syntax-tree/hast-util-is-element)
95-
Check if a node is a (certain) element
147+
check if a node is a (certain) element
96148

97149
## Contribute
98150

99-
See [`contributing.md` in `syntax-tree/.github`][contributing] for ways to get
100-
started.
151+
See [`contributing.md`][contributing] in [`syntax-tree/.github`][health] for
152+
ways to get started.
101153
See [`support.md`][support] for ways to get help.
102154

103155
This project has a [code of conduct][coc].
@@ -138,15 +190,23 @@ abide by its terms.
138190

139191
[npm]: https://docs.npmjs.com/cli/install
140192

193+
[esm]: https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c
194+
195+
[esmsh]: https://esm.sh
196+
197+
[typescript]: https://www.typescriptlang.org
198+
141199
[license]: license
142200

143201
[author]: https://wooorm.com
144202

145-
[contributing]: https://github.com/syntax-tree/.github/blob/HEAD/contributing.md
203+
[health]: https://github.com/syntax-tree/.github
204+
205+
[contributing]: https://github.com/syntax-tree/.github/blob/main/contributing.md
146206

147-
[support]: https://github.com/syntax-tree/.github/blob/HEAD/support.md
207+
[support]: https://github.com/syntax-tree/.github/blob/main/support.md
148208

149-
[coc]: https://github.com/syntax-tree/.github/blob/HEAD/code-of-conduct.md
209+
[coc]: https://github.com/syntax-tree/.github/blob/main/code-of-conduct.md
150210

151211
[hast]: https://github.com/syntax-tree/hast
152212

0 commit comments

Comments
 (0)