Skip to content

Commit ec0ed6f

Browse files
committed
make README and fill out package
1 parent 97b050f commit ec0ed6f

File tree

3 files changed

+66
-1
lines changed

3 files changed

+66
-1
lines changed

README.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<header>
2+
<h1>Better rounded corners</h1>
3+
<i>for HTML divs in React.js</i>
4+
</header>
5+
<br/><br/>
6+
`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.
7+
8+
Here is a very clear demonstration of these smooth corners:
9+
10+
![Figure showing that these corners are very much hunky-dory](img/compare.svg)
11+
12+
## Installation
13+
14+
```shell
15+
npm i react-round-div
16+
```
17+
18+
## Usage
19+
Simply import the package and replace any divs with rounded corners (`border-radius`) that you want to improve. `react-round-div` will handle the rest.
20+
```jsx
21+
import RoundDiv from 'react-round-div';
22+
23+
const App = () => {
24+
return (
25+
<RoundDiv>
26+
<p>Hello smooth corners!</p>
27+
</RoundDiv>
28+
)
29+
};
30+
31+
export default App;
32+
```
33+
`react-round-div` will clip the `border-radius` of it is too large to prevent artifacts from appearing. You can turn this off by passing `clip={false}`.
34+
35+
36+
## Caveats
37+
This package is still in the starting blocks, so for now only single colored backgrounds and borders are supported.
38+
There is support to come for gradients and image backgrounds, gradient borders, and perhaps proper `backdrop-filter` support.

img/compare.svg

Lines changed: 14 additions & 0 deletions
Loading

package.json

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,27 @@
11
{
22
"name": "react-round-div",
33
"version": "1.0.0",
4-
"description": "",
4+
"description": "Make your rounded corners look phenomenal with g2 continuity.",
55
"main": "dist/main.js",
66
"scripts": {
77
"test": "jest",
88
"build": "babel src --out-dir dist --copy-files"
99
},
1010
"author": "drinking-code",
1111
"license": "MIT",
12+
"repository": {
13+
"type": "git",
14+
"url": "git+https://github.com/drinking-code/react-round-div.git"
15+
},
16+
"keywords": [
17+
"svg",
18+
"div",
19+
"rounded-corners"
20+
],
21+
"bugs": {
22+
"url": "https://github.com/drinking-code/react-round-div/issues"
23+
},
24+
"homepage": "https://github.com/drinking-code/react-round-div#readme",
1225
"dependencies": {
1326
"react": "^17.0.2"
1427
},

0 commit comments

Comments
 (0)