# react-awesome-watermark

> React Watermark Component

Latest version **1.0.6** (published 2023-05-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-awesome-watermark
pnpm add react-awesome-watermark
yarn add react-awesome-watermark
bun add react-awesome-watermark
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2023-05-29 |
| First published | 2021-05-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 15.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Author | pewww |
| Maintainers | pewww |
| Keywords | react-watermark-component, watermark-security-defense |

## Links

- npm: https://www.npmjs.com/package/react-awesome-watermark
- Repository: https://github.com/Pewww/react-awesome-watermark
- Homepage: https://github.com/Pewww/react-awesome-watermark#readme
- Issues: https://github.com/Pewww/react-awesome-watermark/issues
- npm.io page: https://npm.io/package/react-awesome-watermark

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^17.0.2
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.2
- [typescript](https://npm.io/package/typescript.md) ^4.2.4

## Recent versions

- 1.0.6 (latest) — 2023-05-29
- 1.0.5 — 2023-05-08
- 1.0.4 — 2023-05-08
- 1.0.3 — 2022-01-24
- 1.0.21 — 2021-05-06
- 1.0.2 — 2021-05-06
- 1.0.1 — 2021-05-02
- 1.0.0 — 2021-05-02
- 0.0.5 — 2021-05-02
- 0.0.4 — 2021-05-02
- 0.0.3 — 2021-05-02
- 0.0.2 — 2021-05-02
- 0.0.1 — 2021-05-02

## README

# react-awesome-watermark

## ⚙ Installation

#### npm
```bash
npm install react-awesome-watermark
```

#### yarn
```bash
yarn add react-awesome-watermark
```

## 🌌 Demo

[**See demo in codesandbox.io**](https://codesandbox.io/s/busy-fog-8xvj0?file=/src/App.tsx)

## 👨‍🍳 Usage

### Interface of props

```typescript
// Interface for style props

interface WatermarkStyle {
  width: number;
  height: number;
  color?: string;
  fontSize?: number;
  fontFamily?: string;
  opacity?: number;
  rotate?: number;
  horizontalSpace?: number;
  verticalSpace?: number;
}

const defaultWatermarkStyle = {
  color: '#000',
  fontSize: 16,
  fontFamily: 'sans-serif',
  opacity = 0.13,
  rotate = 25,
  horizontalSpace = 0, // Custom text spacing
  verticalSpace = 0 // Custom text spacing 
};
```

```typescript
// Interface for position props
// It is only active when multiple option is not given.

interface WatermarkPosition {
  x: number;
  y: number;
}

const defaultWatermarkPosition = {
  x: 50
  y: 50
};
```

### Document

| paramters 	| description 	| required 	|
  |--------------	|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------	|----------	|
  | text: string 	| Text to be registered as a watermark 	| O 	|
  | style: WatermarkStyle 	| Styles to be applied to the watermark. 	| O 	|
  | position: WatermarkPosition 	| Location of the watermark based on the wrapper element. 	| X 	|
  | multiple: boolean 	| Allows multiple watermarks to be rendered. 	| X 	|
  | className: string 	| Classname if you want to apply additional styles to watermark. 	| X 	|


### Example

```JSX
import React from 'react';
import Watermark from 'react-awesome-watermark';
import styled from 'styled-components';

const H1 = styled.h1`
  text-align: center;
`;

const H2 = styled.h2`
  text-align: center;
  margin-top: 50px;
`;

const H3 = styled.h3`
  text-align: center;
`;

const WatermarkWrapper = styled.div`
  text-align: center;

  .space-props-test {
    display: inline-block;
    margin: 10px;
  }
`;

const StyledWatermark = styled(Watermark)`
  margin: 0 auto;

  .inner-watermark {
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
    font-size: 20px;
    text-align: center;
    line-height: 2;
  }
`;

export default function App() {
  return (
    <div>
      <H1>Watermark Usage</H1>
      <StyledWatermark
        text="Watermark Rendering"
        style={{
          width: 500,
          height: 500
        }}
        multiple
      >
        <div className="inner-watermark">
          You can drag this text
          <br />
          You can drag this text
          <br />
          You can drag this text
          <br />
          You can drag this text
          <br />
          You can drag this text
          <br />
          You can drag this text
          <br />
          You can drag this text
          <br />
          You can drag this text
        </div>
      </StyledWatermark>
      <H2>When you give "horizontalSpace" or "verticalSpace" style props to Watermark</H2>
      <H3>Before and After</H3>
      <WatermarkWrapper>
        <StyledWatermark
          text="1"
          style={{
            width: 300,
            height: 300
          }}
          multiple
          className="space-props-test"
        >
          <div className="inner-watermark" />
        </StyledWatermark>
        <StyledWatermark
          text="1"
          style={{
            width: 300,
            height: 300,
            horizontalSpace: 50,
            verticalSpace: 50
          }}
          multiple
          className="space-props-test"
        >
          <div className="inner-watermark" />
        </StyledWatermark>
      </WatermarkWrapper>
    </div>
  );
}
```

#### Result

<img src="https://user-images.githubusercontent.com/23455736/117231514-4b62fc00-ae5a-11eb-82de-2565076e45b0.png" width="600">

---
_Source: https://npm.io/package/react-awesome-watermark · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._