screen-mark-react

A simple React component for adding watermark to your screen.

Playground

https://screen-mark-react-playground.netlify.app/

Installation

npm install screen-mark-react

or

yarn add screen-mark-react

Code Implementation

import { useState } from "react";
import { ScreenMark } from "screen-mark-react";

const Home = () => {
  const [darkMode, setDarkMode] = useState(false);

  return (
    <div className={darkMode ? "dark" : ""}>
      <ScreenMark
        title="Hello World!"
        content="For testing purpose only"
        withTimestamp={false}
        fontColor={darkMode ? "white" : "black"}
        fontSize={14}
      />
    </div>
  );
};

export default Home;

Props

| Prop | Type | Default | Description | | --------------- | --------------------------- | --------- | ------------------------------------------------ | | content | string | - | The content to be displayed in the watermark. | | fontColor | CSSProperties["color"] | "black" | The color of the text in the watermark. | | fontSize | CSSProperties["fontSize"] | "16px" | The size of the text in the watermark. | | title | string | - | The title to be displayed in the watermark. | | withTimestamp | boolean | false | Whether to include a timestamp in the watermark. | | heightMark | number | 100 | The height of each watermark mark. | | widthMark | number | 250 | The width of each watermark mark. |