react-svg-border

react-svg-border

---

React component for creating flexible SVG border around children.

Demo

Simple
Progress animation
Multiple paths
Morph demo

🧐 About

This project addresses the challenge of creating responsive borders or backgrounds with a dynamic ratio. Traditional SVG images lack this responsive behavior, making this component a valuable tool for enhancing web design.

🏁 Getting Started

Installing

npm i react-svg-border

Example

App.tsx

import React from 'react';
import SvgBorder from 'react-svg-border/dist';
import styles from './app.module.scss';

const borderConf = [
  {
    path: [
      "left, top",
      "right, top",
      "right, calc(100% - 30px)",
      "calc(100% - 30px), bottom",
      "left, bottom",
    ],
  },
];

function App() {
  return (
    <div className={styles.item}>
      <SvgBorder borderConf={borderConf}>
        <div className={styles.itemInner}>
          <div className={styles.itemTitle}>Lorem ipsum dolor</div>
          <div className={styles.itemDescription}>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </div>
        </div>
      </SvgBorder>
    </div>
  );
}

export default App;

App.module.scss

.item {
  max-width: 600px;
  margin: 20px auto 0;
}

.itemInner {
  padding: 30px 20px;
}

.itemTitle {
  font-size: 32px;
  font-weight: 700;
}

.itemDescription {
  margin: 20px 0 0;
  font-size: 18px;
}

Result

API

name	description	type	default
figures*	Here you can define multiple figures with individual properties, see Figure Api below for more details	FigureType[]
figuresDefaultParams	Used for define default figure params, sames as Figure Api except path property	FiguresDefaultParams	{}
children*	The content of the component	JSX.Element, string	string
classes	Override the styles applied to the component. See CSS API below for more details	object	{}
drawProgress	Set drawing progress. See Progress animation demo	number[]	[]
morphProgress	Set morph progress. See Morph animation demo	number[]	[]

Figure API

key	description	type	default
path*	Cordinates of SVG. See Path API below for more details	(string | { from: string; to: string })[]
type	Defining type of svg, if you want to prevent connect last point to first, use polyline	'polyline' | 'polygon'	'polygon'
fill	Fill svg property	string	'none'
stroke	Stroke svg property	string	'#000'
strokeWidth	Stroke width svg property, be aware this property used in calculating padding space for children wrap	number	1

Path type

type	decription
string	Define static position. See String coordinate type below for more details
{from: string; to: string}	Define init(from) value and morph(to) value.

String coordinate type

Each cordinates should containt position by axis X and Y separated by comma.

type	description	example
Px units	Position defined without units or as px will be static and don't react to change the size of the element	30 pixels from left and 30px from top will be "30px, 30px" or "30, 30"
Percent units	Position defined with percent unit will react to element size, x-axis react to width, y-axis react to height	If element have size 200px width and 300px height, "50%, 50%" will be equal "100px, 150px", but in this case px values will be calculated by element resize
Calc position	If we need to combine pixels and percents, we can use calc, it's similar to css property value calc	If we need position in the top right corner, but we want 30px offset by the x-axis, we can use "calc(100% - 30), 0"
Side position	This type of position helps define position by specific side with considering stroke width	If we have stroke width 5 and we want to place position in the top left corner, we should consider stroke width, so as result we will have "2.5, 2.5" and top right corner "calc(100% - 2.5), 2.5". Instead of this you can use side position and the top left corner will be "left, top", and the top right will be "right, top"