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

    4.47.0 • Public • Published

    @cutting/svg - reusable svg components for SVG documents

    npm version code style: prettier

    install

    pnpm 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 parentRef prop that should point to a valid HTML DOM element.

    usage

    import { useRef } from 'react';
    import { ParentsizeSVG } from '@cutting/svg';
    
    export function App(): JSX.Element {
      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

    203

    Version

    4.47.0

    License

    MIT

    Unpacked Size

    1.35 MB

    Total Files

    37

    Last publish

    Collaborators

    • cutting