Skip to content

Commit 13e2376

Browse files
drinking-codedrinking-code
committed
border works sort of
1 parent ec0ed6f commit 13e2376

File tree

5 files changed

+234
-10
lines changed

5 files changed

+234
-10
lines changed

‎README.md‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
<header>
2-
<h1>Better rounded corners</h1>
3-
<i>for HTML divs in React.js</i>
4-
</header>
5-
<br/><br/>
1+
# Better rounded corners
2+
*for HTML divs in React.js*
3+
64
`react-round-div` makes your rounded rectangles look smoother for a more pleasant feel. With a simple and easy integration into your code you have to do almost nothing to up the style of your project.
75

86
Here is a very clear demonstration of these smooth corners:
@@ -34,5 +32,5 @@ export default App;
3432

3533

3634
## Caveats
37-
This package is still in the starting blocks, so for now only single colored backgrounds and borders are supported.
35+
This package is still in the starting blocks, so for now only single colored backgrounds and solid, uniform borders are supported.
3836
There is support to come for gradients and image backgrounds, gradient borders, and perhaps proper `backdrop-filter` support.

‎img/compare.svg‎

Lines changed: 3 additions & 3 deletions
Loading

‎src/css-utils.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import CSS_COLOR_NAMES from "./html-colors";
2+
3+
function getColor(border) {
4+
if (!border) return false
5+
border = border.split(' ')
6+
for (let i in border) {
7+
i = Number(i)
8+
const val = border[i]
9+
// color is a hex code
10+
if (val.toLowerCase().match(/#([0-9a-f]{3}){1,2}/)) return val
11+
// color is a function (rgb, rgba, hsl, hsla)
12+
if (val.startsWith('rgb') || val.startsWith('hsl')) {
13+
if (val.endsWith(')')) return val
14+
let color = val;
15+
for (let j = 1; !border[i + j - 1].endsWith(')'); j++) {
16+
color += border[i + j]
17+
}
18+
return color
19+
}
20+
// color is a html color name
21+
if (
22+
CSS_COLOR_NAMES.map(color => color.toLowerCase())
23+
.includes(val.toLowerCase())
24+
) return val
25+
}
26+
}
27+
28+
const htmlLengthNotSvgError = new Error('Border length must be either thin, medium, thick, or in one of the following units: em, ex, cm, in, mm, px, pc, pt.')
29+
30+
function getWidth(border) {
31+
if (!border) return false
32+
border = border.split(' ')
33+
for (let i in border) {
34+
i = Number(i)
35+
const val = border[i]
36+
// width is 0
37+
if (val === '0') return '0'
38+
// width is a word
39+
if (val.toLowerCase() === 'thin') return '1px'
40+
if (val.toLowerCase() === 'medium') return '3px'
41+
if (val.toLowerCase() === 'thick') return '5px'
42+
if (val.match(/(cap|ch|ic|lh|rem|rlh|vh|vw|vi|vb|vmin|vmax|Q)/g)) throw htmlLengthNotSvgError
43+
// width is <length>
44+
if (val.match(/(\d+(\.\d+)?(em|ex|px|cm|mm|in|pc|pt)|0)/g)) return val
45+
}
46+
}
47+
48+
export {getWidth, getColor}

‎src/html-colors.js‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
// CSS Color Names
2+
// Compiled by @bobspace.
3+
//
4+
// A javascript array containing all of the color names listed in the CSS Spec.
5+
// The full list can be found here: https://www.w3schools.com/cssref/css_colors.asp
6+
// Use it as you please, 'cuz you can't, like, own a color, man.
7+
8+
const CSS_COLOR_NAMES = [
9+
"AliceBlue",
10+
"AntiqueWhite",
11+
"Aqua",
12+
"Aquamarine",
13+
"Azure",
14+
"Beige",
15+
"Bisque",
16+
"Black",
17+
"BlanchedAlmond",
18+
"Blue",
19+
"BlueViolet",
20+
"Brown",
21+
"BurlyWood",
22+
"CadetBlue",
23+
"Chartreuse",
24+
"Chocolate",
25+
"Coral",
26+
"CornflowerBlue",
27+
"Cornsilk",
28+
"Crimson",
29+
"Cyan",
30+
"DarkBlue",
31+
"DarkCyan",
32+
"DarkGoldenRod",
33+
"DarkGray",
34+
"DarkGrey",
35+
"DarkGreen",
36+
"DarkKhaki",
37+
"DarkMagenta",
38+
"DarkOliveGreen",
39+
"DarkOrange",
40+
"DarkOrchid",
41+
"DarkRed",
42+
"DarkSalmon",
43+
"DarkSeaGreen",
44+
"DarkSlateBlue",
45+
"DarkSlateGray",
46+
"DarkSlateGrey",
47+
"DarkTurquoise",
48+
"DarkViolet",
49+
"DeepPink",
50+
"DeepSkyBlue",
51+
"DimGray",
52+
"DimGrey",
53+
"DodgerBlue",
54+
"FireBrick",
55+
"FloralWhite",
56+
"ForestGreen",
57+
"Fuchsia",
58+
"Gainsboro",
59+
"GhostWhite",
60+
"Gold",
61+
"GoldenRod",
62+
"Gray",
63+
"Grey",
64+
"Green",
65+
"GreenYellow",
66+
"HoneyDew",
67+
"HotPink",
68+
"IndianRed",
69+
"Indigo",
70+
"Ivory",
71+
"Khaki",
72+
"Lavender",
73+
"LavenderBlush",
74+
"LawnGreen",
75+
"LemonChiffon",
76+
"LightBlue",
77+
"LightCoral",
78+
"LightCyan",
79+
"LightGoldenRodYellow",
80+
"LightGray",
81+
"LightGrey",
82+
"LightGreen",
83+
"LightPink",
84+
"LightSalmon",
85+
"LightSeaGreen",
86+
"LightSkyBlue",
87+
"LightSlateGray",
88+
"LightSlateGrey",
89+
"LightSteelBlue",
90+
"LightYellow",
91+
"Lime",
92+
"LimeGreen",
93+
"Linen",
94+
"Magenta",
95+
"Maroon",
96+
"MediumAquaMarine",
97+
"MediumBlue",
98+
"MediumOrchid",
99+
"MediumPurple",
100+
"MediumSeaGreen",
101+
"MediumSlateBlue",
102+
"MediumSpringGreen",
103+
"MediumTurquoise",
104+
"MediumVioletRed",
105+
"MidnightBlue",
106+
"MintCream",
107+
"MistyRose",
108+
"Moccasin",
109+
"NavajoWhite",
110+
"Navy",
111+
"OldLace",
112+
"Olive",
113+
"OliveDrab",
114+
"Orange",
115+
"OrangeRed",
116+
"Orchid",
117+
"PaleGoldenRod",
118+
"PaleGreen",
119+
"PaleTurquoise",
120+
"PaleVioletRed",
121+
"PapayaWhip",
122+
"PeachPuff",
123+
"Peru",
124+
"Pink",
125+
"Plum",
126+
"PowderBlue",
127+
"Purple",
128+
"RebeccaPurple",
129+
"Red",
130+
"RosyBrown",
131+
"RoyalBlue",
132+
"SaddleBrown",
133+
"Salmon",
134+
"SandyBrown",
135+
"SeaGreen",
136+
"SeaShell",
137+
"Sienna",
138+
"Silver",
139+
"SkyBlue",
140+
"SlateBlue",
141+
"SlateGray",
142+
"SlateGrey",
143+
"Snow",
144+
"SpringGreen",
145+
"SteelBlue",
146+
"Tan",
147+
"Teal",
148+
"Thistle",
149+
"Tomato",
150+
"Turquoise",
151+
"Violet",
152+
"Wheat",
153+
"White",
154+
"WhiteSmoke",
155+
"Yellow",
156+
"YellowGreen",
157+
];
158+
159+
export default CSS_COLOR_NAMES

‎src/main.js‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, {useRef, useEffect, useState} from 'react';
22
import getStyle from "./styles-extractor";
33
import './getMatchedCSSRules-polyfill'
4+
import {getWidth, getColor} from "./css-utils";
45

56
export default function RoundDiv({clip, style, children, ...props}) {
67
const [height, setHeight] = useState(0)
@@ -9,6 +10,8 @@ export default function RoundDiv({clip, style, children, ...props}) {
910
const [offsetY, setOffsetY] = useState(0)
1011
const [radius, setRadius] = useState(0)
1112
const [background, setBackground] = useState('transparent')
13+
const [borderColor, setBorderColor] = useState('transparent')
14+
const [borderWidth, setBorderWidth] = useState('1')
1215

1316
const div = useRef()
1417

@@ -22,6 +25,7 @@ export default function RoundDiv({clip, style, children, ...props}) {
2225
svg.style.top = '0px';
2326
svg.style.height = '0px';
2427
svg.style.width = '0px';
28+
svg.style.overflow = 'visible';
2529
svg.style.zIndex = '-1';
2630
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
2731
svg.appendChild(path)
@@ -47,6 +51,19 @@ export default function RoundDiv({clip, style, children, ...props}) {
4751
|| getStyle('background', div.current)?.overwritten[1]?.value
4852
|| 'transparent'
4953
)
54+
console.log(getColor(style?.border), style?.border)
55+
setBorderColor(
56+
getColor(style?.border)
57+
|| style?.borderColor
58+
|| getStyle('borderColor', div.current)?.overwritten[1]?.value
59+
|| 'transparent'
60+
)
61+
setBorderWidth(
62+
getWidth(style?.border)
63+
|| style?.borderWidth
64+
|| getStyle('borderWidth', div.current)?.overwritten[1]?.value
65+
|| '1'
66+
)
5067
}
5168
}, [div, clip, style])
5269

@@ -70,9 +87,11 @@ export default function RoundDiv({clip, style, children, ...props}) {
7087
generateSvgSquircle(height, width, radius, clip)
7188
)
7289
newPath.setAttributeNS('http://www.w3.org/2000/svg', 'fill', background)
90+
newPath.setAttributeNS('http://www.w3.org/2000/svg', 'stroke', borderColor)
91+
newPath.setAttributeNS('http://www.w3.org/2000/svg', 'stroke-width', borderWidth)
7392
// rerender
7493
path.parentNode.innerHTML = newPath.outerHTML
75-
}, [background, height, width, radius, clip, offsetX, offsetY])
94+
}, [background, height, width, radius, clip, offsetX, offsetY, borderColor, borderWidth])
7695

7796
const divStyle = {
7897
...style

0 commit comments

Comments
 (0)