html-to-ascii 0.9.1 → 0.9.2
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/LICENSE +21 -21
- package/README.md +258 -258
- package/dist/components/ASCII.d.ts.map +1 -1
- package/dist/index.es.js +1135 -1123
- package/dist/index.es.js.map +1 -1
- package/dist/index.umd.js +5 -3
- package/dist/index.umd.js.map +1 -1
- package/package.json +66 -66
package/LICENSE
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2026 Zachariah Watson
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Zachariah Watson
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,258 +1,258 @@
|
|
|
1
|
-
```
|
|
2
|
-
__ __ __ __ _ _
|
|
3
|
-
/ /_ / /_____ ___ / / / /_____ ____ ___________(_|_)
|
|
4
|
-
/ __ \/ __/ __ `__ \/ /_____/ __/ __ \______/ __ `/ ___/ ___/ / /
|
|
5
|
-
/ / / / /_/ / / / / / /_____/ /_/ /_/ /_____/ /_/ (__ ) /__/ / /
|
|
6
|
-
/_/ /_/\__/_/ /_/ /_/_/ \__/\____/ \__,_/____/\___/_/_/
|
|
7
|
-
|
|
8
|
-
```
|
|
9
|
-
|
|
10
|
-
html-to-ascii is a React component that dynamically converts an HTML page into pure, selectable, ASCII text. None of that fake Canvas trickery here!
|
|
11
|
-
|
|
12
|
-
[[Changelog](https://github.com/zachariahwatson/html-to-ascii/blob/main/CHANGELOG.md)]
|
|
13
|
-
|
|
14
|
-
## Installation
|
|
15
|
-
|
|
16
|
-
```sh
|
|
17
|
-
npm i html-to-ascii
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
Add `<ASCIIProvider>` to the root of your project:
|
|
21
|
-
|
|
22
|
-
```jsx
|
|
23
|
-
import { StrictMode } from "react"
|
|
24
|
-
import { createRoot } from "react-dom/client"
|
|
25
|
-
import App from "./App.tsx"
|
|
26
|
-
import { ASCIIProvider } from "html-to-ascii"
|
|
27
|
-
|
|
28
|
-
createRoot(document.getElementById("root")!).render(
|
|
29
|
-
<StrictMode>
|
|
30
|
-
<ASCIIProvider>
|
|
31
|
-
<App />
|
|
32
|
-
</ASCIIProvider>
|
|
33
|
-
</StrictMode>,
|
|
34
|
-
)
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
## Usage
|
|
38
|
-
|
|
39
|
-
### Quick Start
|
|
40
|
-
|
|
41
|
-
Wrap your page with `<ASCII>` and add the `ascii` class to any element you want to render:
|
|
42
|
-
|
|
43
|
-
```jsx
|
|
44
|
-
import { ASCII } from "html-to-ascii"
|
|
45
|
-
|
|
46
|
-
function App() {
|
|
47
|
-
return (
|
|
48
|
-
<ASCII>
|
|
49
|
-
<div className="flex justify-center"> <!---I'm not ASCII :(-->
|
|
50
|
-
<div className="text-center w-64 h-24 ascii">Look at me! I'm ASCII!</div>
|
|
51
|
-
</div>
|
|
52
|
-
</ASCII>
|
|
53
|
-
)
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
export default App
|
|
57
|
-
```
|
|
58
|
-
|
|
59
|
-
Output
|
|
60
|
-
|
|
61
|
-
```
|
|
62
|
-
┌─────────────────────────┐
|
|
63
|
-
│ Look at me! I'm ASCII! │
|
|
64
|
-
│ │
|
|
65
|
-
│ │
|
|
66
|
-
│ │
|
|
67
|
-
│ │
|
|
68
|
-
└─────────────────────────┘
|
|
69
|
-
```
|
|
70
|
-
|
|
71
|
-
### Customization
|
|
72
|
-
|
|
73
|
-
html-to-ascii supports three interchangeable methods for customizing the look of your boxes:
|
|
74
|
-
|
|
75
|
-
#### 1. Adding props to `<ASCIIProvider>`:
|
|
76
|
-
|
|
77
|
-
This method changes the global style for every element unless locally overridden.
|
|
78
|
-
_(A full list of options can be seen [here](#asciiprovider))_
|
|
79
|
-
|
|
80
|
-
```html
|
|
81
|
-
<!--set the left and right borders to ":"-->
|
|
82
|
-
<ASCIIProvider l=":" r=":"></ASCIIProvider>
|
|
83
|
-
```
|
|
84
|
-
|
|
85
|
-
Output
|
|
86
|
-
|
|
87
|
-
```
|
|
88
|
-
┌─────────────────────────┐
|
|
89
|
-
: Look at me! I'm ASCII! :
|
|
90
|
-
: :
|
|
91
|
-
: :
|
|
92
|
-
: :
|
|
93
|
-
: :
|
|
94
|
-
└─────────────────────────┘
|
|
95
|
-
```
|
|
96
|
-
|
|
97
|
-
#### 2. Using class names on elements inside of `<ASCII>` to enable certain ASCII features:
|
|
98
|
-
|
|
99
|
-
_(A full list of class names can be seen [here](#ascii))_
|
|
100
|
-
|
|
101
|
-
```jsx
|
|
102
|
-
<ASCII>
|
|
103
|
-
<div className="flex justify-center">
|
|
104
|
-
<!--enable only the border-->
|
|
105
|
-
<div className="text-center w-64 h-24 ascii-border">
|
|
106
|
-
Hey! Where'd the text go?
|
|
107
|
-
<!--enable only text and the top right and bottom left corners-->
|
|
108
|
-
<div className="ascii-text ascii-border-tr ascii-border-bl w-full h-12">Right here!</div>
|
|
109
|
-
</div>
|
|
110
|
-
</div>
|
|
111
|
-
</ASCII>
|
|
112
|
-
```
|
|
113
|
-
|
|
114
|
-
Output
|
|
115
|
-
|
|
116
|
-
```
|
|
117
|
-
┌─────────────────────────┐
|
|
118
|
-
│ ┐│
|
|
119
|
-
│ │
|
|
120
|
-
│ Right here! │
|
|
121
|
-
│└ │
|
|
122
|
-
│ │
|
|
123
|
-
└─────────────────────────┘
|
|
124
|
-
```
|
|
125
|
-
|
|
126
|
-
#### 3. Using class names on elements inside of `<ASCII>` to override global styles:
|
|
127
|
-
|
|
128
|
-
This method allows you to add local styling to a single element without changing the styles of other elements. _(A full list of override class names can be seen [here](#ascii))_
|
|
129
|
-
|
|
130
|
-
```jsx
|
|
131
|
-
<ASCII>
|
|
132
|
-
<div className="flex justify-center">
|
|
133
|
-
<div className="text-center w-96 h-32 p-4 ascii">
|
|
134
|
-
I look so cool! B)
|
|
135
|
-
<br />
|
|
136
|
-
<br />
|
|
137
|
-
<!--override border styles-->
|
|
138
|
-
<div className="ascii ascii-l-║ ascii-r-║ ascii-t-═ ascii-b-═ ascii-tl-╔ ascii-tr-╗ ascii-br-╝ ascii-bl-╚ w-full h-12">
|
|
139
|
-
{"I look even *cooler* >B)"}
|
|
140
|
-
</div>
|
|
141
|
-
</div>
|
|
142
|
-
</div>
|
|
143
|
-
</ASCII>
|
|
144
|
-
```
|
|
145
|
-
|
|
146
|
-
Output
|
|
147
|
-
|
|
148
|
-
```
|
|
149
|
-
┌───────────────────────────────────────┐
|
|
150
|
-
│ │
|
|
151
|
-
│ I look so cool! B) │
|
|
152
|
-
│ ╔═══════════════════════════════════╗ │
|
|
153
|
-
│ ║ I look even *cooler* >B) ║ │
|
|
154
|
-
│ ║ ║ │
|
|
155
|
-
│ ╚═══════════════════════════════════╝ │
|
|
156
|
-
│ │
|
|
157
|
-
└───────────────────────────────────────┘
|
|
158
|
-
```
|
|
159
|
-
|
|
160
|
-
### Preserving Strings and ASCII Art
|
|
161
|
-
|
|
162
|
-
ASCII art can contain some weird character combinations, and sometimes that messes with the renderer (especially "\\" and "(" ). We don't want to escape any characters upon render because it would mess with the grid array length and such, so we can "sterilize" certain texts by using `String.raw` and `white-space: pre`:
|
|
163
|
-
|
|
164
|
-
```jsx
|
|
165
|
-
<ASCII>
|
|
166
|
-
<div className="flex justify-center">
|
|
167
|
-
<div className="w-[1000px] h-72 border text-center ascii whitespace-pre">
|
|
168
|
-
{String.raw`
|
|
169
|
-
_____ _ ______ _ ______ ______ _____ _____
|
|
170
|
-
|_ _| / // ____ `. / \ .' ____ \ .' ___ ||_ _||_ _|
|
|
171
|
-
| | / / `' __) | / _ \ | (___ \_|/ .' \_| | | | |
|
|
172
|
-
| | < < _ |__ '. / ___ \ _.____`. | | | | | |
|
|
173
|
-
_| |_ \ \| \____) | _/ / \ \_| \____) |\ `.___.'\ _| |_ _| |_
|
|
174
|
-
|_____| \_\\______.' |____| |____|\______.' `.____ .'|_____||_____|
|
|
175
|
-
|
|
176
|
-
`}
|
|
177
|
-
</div>
|
|
178
|
-
</ASCII>
|
|
179
|
-
```
|
|
180
|
-
|
|
181
|
-
## API
|
|
182
|
-
|
|
183
|
-
## `<ASCIIProvider>`
|
|
184
|
-
|
|
185
|
-
### Props:
|
|
186
|
-
|
|
187
|
-
| Prop | Type | Default | Description |
|
|
188
|
-
| ------ | --------- | ------- | --------------------- |
|
|
189
|
-
| `t` | `string?` | `'─'` | Top border |
|
|
190
|
-
| `ti` | `string?` | `'┴'` | Top intersection |
|
|
191
|
-
| `b` | `string?` | `'─'` | Bottom border |
|
|
192
|
-
| `bi` | `string?` | `'┬'` | Bottom intersection |
|
|
193
|
-
| `l` | `string?` | `'│'` | Left border |
|
|
194
|
-
| `li` | `string?` | `'┤'` | Left intersection |
|
|
195
|
-
| `r` | `string?` | `'│'` | Right border |
|
|
196
|
-
| `ri` | `string?` | `'├'` | Right intersection |
|
|
197
|
-
| `tl` | `string?` | `'┌'` | Top-left corner |
|
|
198
|
-
| `tr` | `string?` | `'┐'` | Top-right corner |
|
|
199
|
-
| `br` | `string?` | `'┘'` | Bottom-right corner |
|
|
200
|
-
| `bl` | `string?` | `'└'` | Bottom-left corner |
|
|
201
|
-
| `i` | `string?` | `'┼'` | Four-way intersection |
|
|
202
|
-
| `fill` | `string?` | `' '` | Element fill |
|
|
203
|
-
|
|
204
|
-
## `<ASCII>`
|
|
205
|
-
|
|
206
|
-
### Props:
|
|
207
|
-
|
|
208
|
-
| Prop | Type | Default | Description |
|
|
209
|
-
| ---------------- | ---------- | ------- | ------------------------------------------- |
|
|
210
|
-
| `gridReveal` | `boolean?` | `true` | Toggle scan-style reveal of the grid |
|
|
211
|
-
| `revealDuration` | `number?` | `1000` | Duration of the grid reveal in milliseconds |
|
|
212
|
-
|
|
213
|
-
### Class names:
|
|
214
|
-
|
|
215
|
-
| Class name | Description |
|
|
216
|
-
| ----------------- | ------------------------------------------- |
|
|
217
|
-
| `ascii` | Enable all |
|
|
218
|
-
| `ascii-border` | Enable all borders |
|
|
219
|
-
| `ascii-border-l` | Enable left border |
|
|
220
|
-
| `ascii-border-r` | Enable right border |
|
|
221
|
-
| `ascii-border-t` | Enable top border |
|
|
222
|
-
| `ascii-border-b` | Enable bottom border |
|
|
223
|
-
| `ascii-border-tl` | Enable top-left corner |
|
|
224
|
-
| `ascii-border-tr` | Enable top-right corner |
|
|
225
|
-
| `ascii-border-br` | Enable bottom-right corner |
|
|
226
|
-
| `ascii-border-bl` | Enable bottom-left corner |
|
|
227
|
-
| `ascii-text` | Enable text |
|
|
228
|
-
| `ascii-no-fill` | Disable element's fill (will be "see-thru") |
|
|
229
|
-
|
|
230
|
-
### Override class names:
|
|
231
|
-
|
|
232
|
-
Replace '#' with your desired character
|
|
233
|
-
|
|
234
|
-
| Class name | Description |
|
|
235
|
-
| -------------- | --------------------- |
|
|
236
|
-
| `ascii-t-#` | Top border |
|
|
237
|
-
| `ascii-ti-#` | Top intersection |
|
|
238
|
-
| `ascii-b-#` | Bottom border |
|
|
239
|
-
| `ascii-bi-#` | Bottom intersection |
|
|
240
|
-
| `ascii-l-#` | Left border |
|
|
241
|
-
| `ascii-li-#` | Left intersection |
|
|
242
|
-
| `ascii-r-#` | Right border |
|
|
243
|
-
| `ascii-ri-#` | Right intersection |
|
|
244
|
-
| `ascii-tl-#` | Top-left corner |
|
|
245
|
-
| `ascii-tr-#` | Top-right corner |
|
|
246
|
-
| `ascii-br-#` | Bottom-right corner |
|
|
247
|
-
| `ascii-bl-#` | Bottom-left corner |
|
|
248
|
-
| `ascii-i-#` | Four-way intersection |
|
|
249
|
-
| `ascii-fill-#` | Element fill |
|
|
250
|
-
|
|
251
|
-
<!-- Markdown link & img dfn's -->
|
|
252
|
-
|
|
253
|
-
[npm-image]: https://img.shields.io/npm/v/datadog-metrics.svg?style=flat-square
|
|
254
|
-
[npm-url]: https://www.npmjs.com/package/html-to-ascii
|
|
255
|
-
[npm-downloads]: https://img.shields.io/npm/dm/datadog-metrics.svg?style=flat-square
|
|
256
|
-
[travis-image]: https://img.shields.io/travis/dbader/node-datadog-metrics/master.svg?style=flat-square
|
|
257
|
-
[travis-url]: https://travis-ci.org/dbader/node-datadog-metrics
|
|
258
|
-
[wiki]: https://github.com/yourname/yourproject/wiki
|
|
1
|
+
```
|
|
2
|
+
__ __ __ __ _ _
|
|
3
|
+
/ /_ / /_____ ___ / / / /_____ ____ ___________(_|_)
|
|
4
|
+
/ __ \/ __/ __ `__ \/ /_____/ __/ __ \______/ __ `/ ___/ ___/ / /
|
|
5
|
+
/ / / / /_/ / / / / / /_____/ /_/ /_/ /_____/ /_/ (__ ) /__/ / /
|
|
6
|
+
/_/ /_/\__/_/ /_/ /_/_/ \__/\____/ \__,_/____/\___/_/_/
|
|
7
|
+
|
|
8
|
+
```
|
|
9
|
+
|
|
10
|
+
html-to-ascii is a React component that dynamically converts an HTML page into pure, selectable, ASCII text. None of that fake Canvas trickery here!
|
|
11
|
+
|
|
12
|
+
[[Changelog](https://github.com/zachariahwatson/html-to-ascii/blob/main/CHANGELOG.md)]
|
|
13
|
+
|
|
14
|
+
## Installation
|
|
15
|
+
|
|
16
|
+
```sh
|
|
17
|
+
npm i html-to-ascii
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
Add `<ASCIIProvider>` to the root of your project:
|
|
21
|
+
|
|
22
|
+
```jsx
|
|
23
|
+
import { StrictMode } from "react"
|
|
24
|
+
import { createRoot } from "react-dom/client"
|
|
25
|
+
import App from "./App.tsx"
|
|
26
|
+
import { ASCIIProvider } from "html-to-ascii"
|
|
27
|
+
|
|
28
|
+
createRoot(document.getElementById("root")!).render(
|
|
29
|
+
<StrictMode>
|
|
30
|
+
<ASCIIProvider>
|
|
31
|
+
<App />
|
|
32
|
+
</ASCIIProvider>
|
|
33
|
+
</StrictMode>,
|
|
34
|
+
)
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## Usage
|
|
38
|
+
|
|
39
|
+
### Quick Start
|
|
40
|
+
|
|
41
|
+
Wrap your page with `<ASCII>` and add the `ascii` class to any element you want to render:
|
|
42
|
+
|
|
43
|
+
```jsx
|
|
44
|
+
import { ASCII } from "html-to-ascii"
|
|
45
|
+
|
|
46
|
+
function App() {
|
|
47
|
+
return (
|
|
48
|
+
<ASCII>
|
|
49
|
+
<div className="flex justify-center"> <!---I'm not ASCII :(-->
|
|
50
|
+
<div className="text-center w-64 h-24 ascii">Look at me! I'm ASCII!</div>
|
|
51
|
+
</div>
|
|
52
|
+
</ASCII>
|
|
53
|
+
)
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
export default App
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
Output
|
|
60
|
+
|
|
61
|
+
```
|
|
62
|
+
┌─────────────────────────┐
|
|
63
|
+
│ Look at me! I'm ASCII! │
|
|
64
|
+
│ │
|
|
65
|
+
│ │
|
|
66
|
+
│ │
|
|
67
|
+
│ │
|
|
68
|
+
└─────────────────────────┘
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### Customization
|
|
72
|
+
|
|
73
|
+
html-to-ascii supports three interchangeable methods for customizing the look of your boxes:
|
|
74
|
+
|
|
75
|
+
#### 1. Adding props to `<ASCIIProvider>`:
|
|
76
|
+
|
|
77
|
+
This method changes the global style for every element unless locally overridden.
|
|
78
|
+
_(A full list of options can be seen [here](#asciiprovider))_
|
|
79
|
+
|
|
80
|
+
```html
|
|
81
|
+
<!--set the left and right borders to ":"-->
|
|
82
|
+
<ASCIIProvider l=":" r=":"></ASCIIProvider>
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
Output
|
|
86
|
+
|
|
87
|
+
```
|
|
88
|
+
┌─────────────────────────┐
|
|
89
|
+
: Look at me! I'm ASCII! :
|
|
90
|
+
: :
|
|
91
|
+
: :
|
|
92
|
+
: :
|
|
93
|
+
: :
|
|
94
|
+
└─────────────────────────┘
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
#### 2. Using class names on elements inside of `<ASCII>` to enable certain ASCII features:
|
|
98
|
+
|
|
99
|
+
_(A full list of class names can be seen [here](#ascii))_
|
|
100
|
+
|
|
101
|
+
```jsx
|
|
102
|
+
<ASCII>
|
|
103
|
+
<div className="flex justify-center">
|
|
104
|
+
<!--enable only the border-->
|
|
105
|
+
<div className="text-center w-64 h-24 ascii-border">
|
|
106
|
+
Hey! Where'd the text go?
|
|
107
|
+
<!--enable only text and the top right and bottom left corners-->
|
|
108
|
+
<div className="ascii-text ascii-border-tr ascii-border-bl w-full h-12">Right here!</div>
|
|
109
|
+
</div>
|
|
110
|
+
</div>
|
|
111
|
+
</ASCII>
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
Output
|
|
115
|
+
|
|
116
|
+
```
|
|
117
|
+
┌─────────────────────────┐
|
|
118
|
+
│ ┐│
|
|
119
|
+
│ │
|
|
120
|
+
│ Right here! │
|
|
121
|
+
│└ │
|
|
122
|
+
│ │
|
|
123
|
+
└─────────────────────────┘
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
#### 3. Using class names on elements inside of `<ASCII>` to override global styles:
|
|
127
|
+
|
|
128
|
+
This method allows you to add local styling to a single element without changing the styles of other elements. _(A full list of override class names can be seen [here](#ascii))_
|
|
129
|
+
|
|
130
|
+
```jsx
|
|
131
|
+
<ASCII>
|
|
132
|
+
<div className="flex justify-center">
|
|
133
|
+
<div className="text-center w-96 h-32 p-4 ascii">
|
|
134
|
+
I look so cool! B)
|
|
135
|
+
<br />
|
|
136
|
+
<br />
|
|
137
|
+
<!--override border styles-->
|
|
138
|
+
<div className="ascii ascii-l-║ ascii-r-║ ascii-t-═ ascii-b-═ ascii-tl-╔ ascii-tr-╗ ascii-br-╝ ascii-bl-╚ w-full h-12">
|
|
139
|
+
{"I look even *cooler* >B)"}
|
|
140
|
+
</div>
|
|
141
|
+
</div>
|
|
142
|
+
</div>
|
|
143
|
+
</ASCII>
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
Output
|
|
147
|
+
|
|
148
|
+
```
|
|
149
|
+
┌───────────────────────────────────────┐
|
|
150
|
+
│ │
|
|
151
|
+
│ I look so cool! B) │
|
|
152
|
+
│ ╔═══════════════════════════════════╗ │
|
|
153
|
+
│ ║ I look even *cooler* >B) ║ │
|
|
154
|
+
│ ║ ║ │
|
|
155
|
+
│ ╚═══════════════════════════════════╝ │
|
|
156
|
+
│ │
|
|
157
|
+
└───────────────────────────────────────┘
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
### Preserving Strings and ASCII Art
|
|
161
|
+
|
|
162
|
+
ASCII art can contain some weird character combinations, and sometimes that messes with the renderer (especially "\\" and "(" ). We don't want to escape any characters upon render because it would mess with the grid array length and such, so we can "sterilize" certain texts by using `String.raw` and `white-space: pre`:
|
|
163
|
+
|
|
164
|
+
```jsx
|
|
165
|
+
<ASCII>
|
|
166
|
+
<div className="flex justify-center">
|
|
167
|
+
<div className="w-[1000px] h-72 border text-center ascii whitespace-pre">
|
|
168
|
+
{String.raw`
|
|
169
|
+
_____ _ ______ _ ______ ______ _____ _____
|
|
170
|
+
|_ _| / // ____ `. / \ .' ____ \ .' ___ ||_ _||_ _|
|
|
171
|
+
| | / / `' __) | / _ \ | (___ \_|/ .' \_| | | | |
|
|
172
|
+
| | < < _ |__ '. / ___ \ _.____`. | | | | | |
|
|
173
|
+
_| |_ \ \| \____) | _/ / \ \_| \____) |\ `.___.'\ _| |_ _| |_
|
|
174
|
+
|_____| \_\\______.' |____| |____|\______.' `.____ .'|_____||_____|
|
|
175
|
+
|
|
176
|
+
`}
|
|
177
|
+
</div>
|
|
178
|
+
</ASCII>
|
|
179
|
+
```
|
|
180
|
+
|
|
181
|
+
## API
|
|
182
|
+
|
|
183
|
+
## `<ASCIIProvider>`
|
|
184
|
+
|
|
185
|
+
### Props:
|
|
186
|
+
|
|
187
|
+
| Prop | Type | Default | Description |
|
|
188
|
+
| ------ | --------- | ------- | --------------------- |
|
|
189
|
+
| `t` | `string?` | `'─'` | Top border |
|
|
190
|
+
| `ti` | `string?` | `'┴'` | Top intersection |
|
|
191
|
+
| `b` | `string?` | `'─'` | Bottom border |
|
|
192
|
+
| `bi` | `string?` | `'┬'` | Bottom intersection |
|
|
193
|
+
| `l` | `string?` | `'│'` | Left border |
|
|
194
|
+
| `li` | `string?` | `'┤'` | Left intersection |
|
|
195
|
+
| `r` | `string?` | `'│'` | Right border |
|
|
196
|
+
| `ri` | `string?` | `'├'` | Right intersection |
|
|
197
|
+
| `tl` | `string?` | `'┌'` | Top-left corner |
|
|
198
|
+
| `tr` | `string?` | `'┐'` | Top-right corner |
|
|
199
|
+
| `br` | `string?` | `'┘'` | Bottom-right corner |
|
|
200
|
+
| `bl` | `string?` | `'└'` | Bottom-left corner |
|
|
201
|
+
| `i` | `string?` | `'┼'` | Four-way intersection |
|
|
202
|
+
| `fill` | `string?` | `' '` | Element fill |
|
|
203
|
+
|
|
204
|
+
## `<ASCII>`
|
|
205
|
+
|
|
206
|
+
### Props:
|
|
207
|
+
|
|
208
|
+
| Prop | Type | Default | Description |
|
|
209
|
+
| ---------------- | ---------- | ------- | ------------------------------------------- |
|
|
210
|
+
| `gridReveal` | `boolean?` | `true` | Toggle scan-style reveal of the grid |
|
|
211
|
+
| `revealDuration` | `number?` | `1000` | Duration of the grid reveal in milliseconds |
|
|
212
|
+
|
|
213
|
+
### Class names:
|
|
214
|
+
|
|
215
|
+
| Class name | Description |
|
|
216
|
+
| ----------------- | ------------------------------------------- |
|
|
217
|
+
| `ascii` | Enable all |
|
|
218
|
+
| `ascii-border` | Enable all borders |
|
|
219
|
+
| `ascii-border-l` | Enable left border |
|
|
220
|
+
| `ascii-border-r` | Enable right border |
|
|
221
|
+
| `ascii-border-t` | Enable top border |
|
|
222
|
+
| `ascii-border-b` | Enable bottom border |
|
|
223
|
+
| `ascii-border-tl` | Enable top-left corner |
|
|
224
|
+
| `ascii-border-tr` | Enable top-right corner |
|
|
225
|
+
| `ascii-border-br` | Enable bottom-right corner |
|
|
226
|
+
| `ascii-border-bl` | Enable bottom-left corner |
|
|
227
|
+
| `ascii-text` | Enable text |
|
|
228
|
+
| `ascii-no-fill` | Disable element's fill (will be "see-thru") |
|
|
229
|
+
|
|
230
|
+
### Override class names:
|
|
231
|
+
|
|
232
|
+
Replace '#' with your desired character
|
|
233
|
+
|
|
234
|
+
| Class name | Description |
|
|
235
|
+
| -------------- | --------------------- |
|
|
236
|
+
| `ascii-t-#` | Top border |
|
|
237
|
+
| `ascii-ti-#` | Top intersection |
|
|
238
|
+
| `ascii-b-#` | Bottom border |
|
|
239
|
+
| `ascii-bi-#` | Bottom intersection |
|
|
240
|
+
| `ascii-l-#` | Left border |
|
|
241
|
+
| `ascii-li-#` | Left intersection |
|
|
242
|
+
| `ascii-r-#` | Right border |
|
|
243
|
+
| `ascii-ri-#` | Right intersection |
|
|
244
|
+
| `ascii-tl-#` | Top-left corner |
|
|
245
|
+
| `ascii-tr-#` | Top-right corner |
|
|
246
|
+
| `ascii-br-#` | Bottom-right corner |
|
|
247
|
+
| `ascii-bl-#` | Bottom-left corner |
|
|
248
|
+
| `ascii-i-#` | Four-way intersection |
|
|
249
|
+
| `ascii-fill-#` | Element fill |
|
|
250
|
+
|
|
251
|
+
<!-- Markdown link & img dfn's -->
|
|
252
|
+
|
|
253
|
+
[npm-image]: https://img.shields.io/npm/v/datadog-metrics.svg?style=flat-square
|
|
254
|
+
[npm-url]: https://www.npmjs.com/package/html-to-ascii
|
|
255
|
+
[npm-downloads]: https://img.shields.io/npm/dm/datadog-metrics.svg?style=flat-square
|
|
256
|
+
[travis-image]: https://img.shields.io/travis/dbader/node-datadog-metrics/master.svg?style=flat-square
|
|
257
|
+
[travis-url]: https://travis-ci.org/dbader/node-datadog-metrics
|
|
258
|
+
[wiki]: https://github.com/yourname/yourproject/wiki
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ASCII.d.ts","sourceRoot":"","sources":["../../lib/components/ASCII.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ASCII.d.ts","sourceRoot":"","sources":["../../lib/components/ASCII.tsx"],"names":[],"mappings":"AA8lBA,QAAA,MAAM,SAAS,GAAI,2CAIhB;IACF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAA;CACvB,4CAsGA,CAAA;AAED,eAAO,MAAM,KAAK,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,4CAclE,CAAA"}
|