1.1.1 • Published 1 year ago
screen-mark-react v1.1.1
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. |