@galiojs/react-watermark
Introduction
It is a mini watermark library based on React
Installation
Use yarn
$ yarn add react-watermark
Usage
import React from "react";
import { Watermark } from "react-watermark";
function App() {
return (
<div>
<Watermark
texts={[
{
translateX: 65,
translateY: 35,
rotate: -15,
text: "Yo yo yo",
},
{
translateX: 110,
translateY: 55,
rotate: -15,
text: "Check it now.",
},
]}
/>
<h2>Hello Watermark!</h2>
</div>
);
}
API
- WatermarkProps
Prop | Type | Description | Default |
---|---|---|---|
width | number | SVG width | 180 |
height | number | SVG height | 80 |
zIndex | number | Watermark div style z-index | 9999 |
opacity | number | Watermark div style opacity | 0.15 |
texts | Text[] | Watermark texts | [] |
- Text
Prop | Type | Description | Default |
---|---|---|---|
translateX | number | SVG TEXT transform translateX | |
translateY | number | SVG TEXT transform translateY | |
rotate | number | SVG TEXT transform rotate | |
fill | string | SVG TEXT fill | "#000000" |
fontFamily | string | SVG TEXT font family | "monospace" |
text | string | SVG TEXT inner text |
License
MIT