https://github.com/hirohe/react-watermark

A React Component to wrap watermark text on child component, using generated svg as background-image
https://github.com/hirohe/react-watermark

component react reactcompoenets watermark

Last synced: about 2 months ago
JSON representation

A React Component to wrap watermark text on child component, using generated svg as background-image

• Host: GitHub
• URL: https://github.com/hirohe/react-watermark
• Owner: hirohe
• License: mit
• Created: 2020-11-19T14:47:39.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-11T11:56:32.000Z (almost 2 years ago)
• Last Synced: 2024-10-15T13:19:38.224Z (2 months ago)
• Topics: component, react, reactcompoenets, watermark
• Language: TypeScript
• Homepage: https://hirohe.github.io/react-watermark/?path=/docs/watermark-test--default
• Size: 454 KB
• Stars: 12
• Watchers: 2
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# React Watermark Component

![version](https://badge.fury.io/js/%40hirohe%2Freact-watermark.svg)

A React Component to wrap watermark text on child component, using generated svg as background-image

## Doc

[Storybook](https://hirohe.github.io/react-watermark/?path=/docs/watermark-test--default)

## Usage:

> this Component requires react version >=16.8.0, in order to use the react hook feature

```bash

yarn add @hirohe/react-watermark

# or

npm i --save @hirohe/react-watermark

```

e.g.

```jsx

import { Watermark } from '@hirohe/react-watermark';

const ContentWithWatermark = () => (

  

    


      Lorem ipsum

    

  

)

```


![example](https://github.com/hirohe/react-watermark/raw/master/doc/example.png)

## Props

| prop           | description                      | type              | default                      |

|----------------|----------------------------------|-------------------|------------------------------|

| show           | show watermark or not            | boolean           | true                         |

| text           | watermark text                   | string            | -                            |

| textColor      | color of watermark               | color string      | #cccccc                      |

| textSize       | watermark text size in px unit   | number            | 24                           |

| fontFamily     | watermark text font-family       | string            | Arial, Helvetica, sans-serif |

| lineHeight     | watermark text lineHeight        | string            | '1.2rem'                     |

| multiline      | whether text is multiline or not | boolean           | false                        |

| opacity        | watermark text opacity           | number            | 0.2                          |

| rotate         | watermark text rotate degree     | number            | -45                          |

| gutter         | gutter between watermark text    | number            | 0                            |

| wrapperStyle   | style of wrapper                 | CSSProperties     | -                            |

| wrapperElement | element of wrapper               | React.ElementType | 'div'                        |

## TODO

- [x] multiline watermark text

- [x] adjustable space between watermark

## License

MIT License. See `LICENSE.txt` for more information.