Newly Purchased Memories

    react-watermark-component

    2.2.1 • Public • Published
    • react-watermark-component is a component that can generate a water mark background image.
    • this react component is from an internal project of youzan company.

    feature

    • the arrangement is oblique
    • security defense -- prevent somebody from deleting the watermark dom, or modifying the style attribute
    • support securityAlarm callback -- it will be revoked when the watermark is attacked
    • support to configurate the style of watermark text, such as the font, rotate angle, chunkWidth, chunkHeight.
    • support to use this component twice or more times in one page
    • the watermark is drawn by canvas

    suggestion

    • we suggest to use this component in the global, namely, the root dom.
    • the performance is better when the component is used in single page application, the position is the root component of react-router.

    display

    • water mark image

    install

        yarn add react-watermark-component

    or

      npm i react-watermark-component --save

    import

    • this package is developed using es6 syntax, so we recommend to load the package as follows:
        import ReactWaterMark from 'react-watermark-component';

    or you can also load as follows:

      const ReactWaterMark = require('react-watermark-component')

    the props of this component

    • waterMarkText:string, the text of watermark

    • openSecurityDefense:bool, decide whether to open security defense. By default, the security defense isn't opened.

    • securityAlarm:function, when the security defense is opened and water mark is attacked, the securityAlarm callback will be called. The securityAlarm props is optional, it will be triggered when someone is deleting the water mark dom or modifying the style attribute of the water mark dom.

    • options:object, the options is optional, the default value of the field of the options object is as follows.

      option default value
      chunkWidth 200
      chunkHeight 60
      textAlign 'left'
      textBaseline 'bottom'
      globalAlpha 0.17
      font '14px Microsoft Yahei'
      rotateAngle -0.26
      fillStyle '#666'
      • chunkWidth:number, the width of a piece of water mark, it's suggested that the value is more than the real width, such as the real width is 150, correspondingly the chunkWidth is 200
      • chunkHeight:number, the height of a piece of water mark, it's suggested that the value is at least four times than the font-size of the real water mark text

    Demo

      render() {
        const text = `${loginedUser.cas_username}${loginedUser.cas_id}`;
        const beginAlarm = function() { console.log('start alarm'); };
        const options = {
          chunkWidth: 200,
          chunkHeight: 60,
          textAlign: 'left',
          textBaseline: 'bottom',
          globalAlpha: 0.17,
          font: '14px Microsoft Yahei',
          rotateAngle: -0.26,
          fillStyle: '#666'
        }
        return (
          <ReactWaterMark
            waterMarkText={text}
            openSecurityDefense
            securityAlarm={beginAlarm}
            options={options}
          >
            <AppLayout>
              ...
            </Applayout>
          </ReactWaterMark>
        )
      }

    compatibility

    Contributing

    • compile
      npm run build

    License

    • ISC

    Install

    npm i react-watermark-component

    DownloadsWeekly Downloads

    192

    Version

    2.2.1

    License

    MIT

    Unpacked Size

    31.1 kB

    Total Files

    8

    Last publish

    Collaborators

    • spray