romaine-components

Component library for use with romaine

Installation

$ npm i romaine-components OR $ yarn add romaine-components romaine

Example

import { useEffect, useState, useMemo } from "react";
import { RomaineExample } from "romaine-components/example";
import { Romaine } from "romaine";

function App() {
  const [blob, setBlob] = useState<Blob | null>(null);
  const image = useMemo(
    () => `https://source.unsplash.com/random?unique=${Math.random()}`,
    []
  );
  useEffect(() => {
    if (blob !== null) {
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", "image.png"); //or any other extension
      document.body.appendChild(link);
      link.click();
    }
  }, [blob]);

  return (
    <div className="App">
      <Romaine angle={90}>
        <RomaineExample
          imageExportOptions={{ type: "image/jpeg", quality: 0.92 }}
          setBlob={setBlob}
          image={image}
        />
      </Romaine>
    </div>
  );
}

export default App;

Field Inputs

Romaine

Note:

Changing props triggers the Context Alternative, which causes an un-needed render when you can use the context alternative yourself.

Parameter	Type	Description	Default	Context Alternative
angle	number	Turn angle for rotation tool	90	setAngle(90)

Romaine Components

Parameter	Type	Description	Default
imageExportOptions	object	Object given to RomaineRef.current?.getBlob() function	90
setBlob	function	setter function give from useState hook	undefined
image	string	location (URL or File) of the image	null

imageExportOptions

Parameter	Type	Description	Default
type: "image/jpeg"	string	Object given to RomaineRef.current?.getBlob() function	image/png
quality	number	Quality settings for image when type = image/webp OR image/jpeg	0.92