Skip to content

Commit c3f6261

Browse files
committed
fix readme
1 parent 151d3f4 commit c3f6261

File tree

1 file changed

+5
-2
lines changed

1 file changed

+5
-2
lines changed

README.md

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ A [Hotwire](https://hotwired.dev/) [Stimulus](https://stimulus.hotwired.dev/) co
99
</a>
1010
<img src="https://badgen.net/npm/types/tslib" alt="types included">
1111
<img src="https://badgen.net/npm/license/stimulus-blurhash" alt="MIT license">
12-
<img src="./docs/assets/example-buildstatus-badge.png" alt="Sauce test status">
1312
</p>
1413
<br />
1514

@@ -35,7 +34,9 @@ The blur hash `LGF...` in this example is from https://blurha.sh/.
3534
<!-- any content here -->
3635
</div>
3736
```
37+
3838
becomes
39+
3940
<img src="./docs/blurhash-example.png" alt="rendered blurhash">
4041

4142
The screenshot actually uses the classes `m-10 rounded-xl shadow-xl w-3/4 h-3/4` from [tailwindcss](https://tailwindcss.com/).
@@ -55,7 +56,7 @@ Register the controller in your stimulus application:
5556
```js
5657
import { application } from "./application";
5758

58-
import BlurhashController from "./blurhash_controller";
59+
import { BlurhashController } from "./blurhash_controller";
5960
application.register("blurhash", BlurhashController);
6061
```
6162

@@ -69,9 +70,11 @@ and then use it with any element:
6970

7071
Style it any way you want, only background-size and background-color are managed by this library.
7172

73+
```html
7274
<div class="w-96 h-72 flex justify-center items-center text-xl text-white m-10 rounded-xl shadow-xl bg-red-500 bg-blend-difference" data-controller="blurhash" data-blurhash-blurhash-value="LGF5?xYk^6#M@-5c,1J5@[or[Q6.">
7375
Hello world
7476
</div>
77+
```
7578

7679
It even works on the document body:
7780

0 commit comments

Comments
 (0)