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

4.54.18 • 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>
  );
};

Readme

Keywords

none

Package Sidebar

Install

npm i @cutting/svg

Weekly Downloads

146

Version

4.54.18

License

MIT

Unpacked Size

1.38 MB

Total Files

47

Last publish

Collaborators

  • cutting