@cutting/svg

[![npm version](https://img.shields.io/npm/v/@cutting/svg.svg)](https://www.npmjs.com/package/@cutting/svg) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@cutting/svg
2204.48.0a day ago2 years agoMinified + gzip package size for @cutting/svg in KB

Readme

@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>
  );
};