r-watermark v0.1.9

r-watermark

Introduction

RWatermark is a mini watermark library based on React ⚛ .

Installation

Use yarn

$ yarn add r-watermark

Demo

To run the demo on your local server, please do as follows.

$ yarn
$ yarn start

Then open http://localhost:3000/

Usage

import React, { Component } from "react";
import { render } from "react-dom";
import { wrapWatermark } from "r-watermark";

export interface AppProps {
  style?: CSSProperties;
  watermark?: JSX.Element;
}


const alertIt = () => alert("Here you go.");

class App extends Component<AppProps> {
  render() {
    const { style, watermark } = this.props;

    return (
      <div style={style} className="App">
        {watermark}
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to RWatermark</h2>
        </div>
        <div style={{ padding: 160 }}>
          <button
            style={{
              height: 32,
              minWidth: 100,
              color: "white",
              background: "skyblue",
              border: 0,
            }}
            onClick={alertIt}
          >
            Hello App
          </button>
        </div>
      </div>
    );
  }
}

const texts = [
  {
    translateX: 65,
    translateY: 35,
    rotate: -15,
    text: "Yo yo yo",
  },
  {
    translateX: 110,
    translateY: 55,
    rotate: -15,
    text: "Check it now.",
  },
];

const WithWatermark = withWatermark<AppProps>({ texts })(App);

render(
  <WithWatermark />,
  document.querySelector("#react-root")
);

API

• WatermarkProps

• Text

License

MIT