@cutting/svg
    TypeScript icon, indicating that this package has built-in type declarations

    4.31.4 • Public • Published

    @cutting/svg - reusable svg components for SVG documents

    npm version code style: prettier

    install

    yarn add @cutting/svg
    
    # or
    
    npm install @cutting/svg

    ParentsizeSVG

    A react component that will resize and scale to the dimensions of the supplied react ref object.

    svg document resizing to scale when using the ParentsizeSVG component

    The ParentsizeSVG component takes an elementRef prop that should point to a valid HTML DOM element.

    usage

    import type { FC } from 'react';
    import { useRef } from 'react';
    import { ParentsizeSVG } from '@cutting/svg';
    
    export const App: FC = () => {
      const ref = useRef<HTMLDivElement>(null);
    
      return (
        <div className={styles.container} ref={ref}>
          <ParentsizeSVG ref={ref}>
            <rect
              x="20%"
              y="20%"
              width={'50%'}
              height={'50%'}
              rx="20"
              style={{ fill: '#ff0000', stroke: '#000000', strokeWidth: '2px' }}
            />
          </ParentsizeSVG>
        </div>
      );
    };

    Keywords

    none

    Install

    npm i @cutting/svg

    DownloadsWeekly Downloads

    283

    Version

    4.31.4

    License

    MIT

    Unpacked Size

    1.51 MB

    Total Files

    87

    Last publish

    Collaborators

    • cutting