Have ideas to improve npm?Join in the discussion! »

    rescript-blurhash

    0.3.2 • Public • Published

    rescript-blurhash

    BlurHash implementation in ReScript language.

    Usage in HTML

    You can use this in plain html by simply inserting a script tag, then add data-blurhash attribute in image.

    <script src="https://unpkg.com/rescript-blurhash@0.3.1/dist/production.min.js"></script>

    The script will automatically replace all images with data-blurhash attribute with the blurred version of the image. When the original image is loaded it will change back the blurred image with the original one.

    <!DOCTYPE html>
    <html lang="en">
      <head></head>
      <body>
        <img
          src="https://blurha.sh/assets/images/img1.jpg"
          style="width: 269px; height: 173px"
        />
        <img
          src="https://blurha.sh/assets/images/img1.jpg"
          data-blurhash="LEHV6nWB2yk8pyo0adR*.7kCMdnj"
          style="width: 269px; height: 173px"
        />
        <script src="https://unpkg.com/rescript-blurhash@0.3.1/dist/production.min.js"></script> 
      </body>
    </html>

    In the gif below, the right image is with blurhash, and the left is without blurhash.

    example

    Usage in ReScript or ReasonML project

    Installation

    npm install --save rescript-blurhash

    Then add rescript-blurhash to bs-dependencies in your bsconfig.json:

    {
      ...
      "bs-dependencies": ["rescript-blurhash"]
    }

    Interface

    type t = string;
    type pixels = Js.TypedArray2.Uint8ClampedArray.t;
    type dataURL = string;
    type error =
      | ValidationError(string);
     
    let decode:
      (~hash: t, ~width: int, ~height: int, ~punch: float) =>
      Belt.Result.t(pixels, error);
     
    // This function can only run on browser environment
    let toDataURL:
      (~hash: t, ~width: int, ~height: int) => Belt.Result.t(dataURL, error);
     
    let encode:
      (
        ~pixels: pixels,
        ~width: int,
        ~height: int,
        ~componentX: int,
        ~componentY: int
      ) =>
      Belt.Result.t(t, error);

    Example in ReasonReact

    [@react.component]
    let make = () => {
      let dataURL =
        switch (
          BlurHash.toDataURL(
            ~hash="LEHV6nWB2yk8pyo0adR*.7kCMdnj",
            ~width=32,
            ~height=32,
          )
        ) {
        | Belt.Result.Ok(data) => data
        | Belt.Result.Error(_) => ""
        };
     
      <img
        src=dataURL
        style={ReactDOMRe.Style.make(~width="269px", ~height="173px", ())}
      />;
    };

    Install

    npm i rescript-blurhash

    DownloadsWeekly Downloads

    15

    Version

    0.3.2

    License

    MIT

    Unpacked Size

    22.7 kB

    Total Files

    12

    Last publish

    Collaborators

    • avatar