Skip to content

Make your rounded corners look phenomenal with G2-continuity.

Notifications You must be signed in to change notification settings

drinking-code/react-round-div

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

40 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Better rounded corners

for HTML divs in React.js

react-round-div makes your rounded rectangles look smoother for a more pleasant feel. The package weighs just under 10KB and has an almost "plug and play"-integration into your code, so that you have to do next to nothing to up the style of your project.

Here is a very clear demonstration of these smooth corners:

Figure showing that these corners are very much hunky-dory

Installation

npm i react-round-div

Size

Gzipped Minified + Gzipped
react-round-div 7.81 KB 5.27 KB
react-round-div + dependencies 21.01 KB 9.45 KB

Usage

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.

import RoundDiv from 'react-round-div';

const App = () => {
    return (
        <RoundDiv>
            <p>Hello smooth corners!</p>
        </RoundDiv>
    )
};

export default App;

Options

dontConvertShadow

If you have set a box-shadow in your CSS, react-round-div will convert it to a drop-shadow(). This happens because otherwise, the old rounded corners may shine through. If you want react-round-div to not convert your box-shadows, add the dontConvertShadow option:

<RoundDiv dontConvertShadow>
    <p>Content</p>
</RoundDiv>

Things to note & caveats

This package is still in the starting blocks, some cases where it might not behave as expected. For example, some border styles are not rendered correctly, and some transitions and animations on the div may not work properly.

There are a couple of css properties, that you can't reliably set inline with RoundDiv:

  • the background property and all the properties it is a shorthand for
  • the border, border-image, and all the properties they are a shorthand for
  • overflow
  • box-shadow
  • filter, if you haven't set dontConvertShadow

You shouldn't set these properties inline. Instead, set them in a stylesheet. This behaviour may change in future versions. The filter property in particular will only not work, if you have set a box-shadow AND have not set dontConvertShadow. This may also change in future versions.

Intended differences to the html <div>

Unlike the html <div>, RoundDiv still rounds the corners of borders if you have set a border image. This looks great with gradients, but might clash with the use of actual images as borders.
You may notice a flash of white in the border before the gradient is shown. To combat this, define a border-color for the element in addition to the border-image gradient. This gives the browser a fallback to show before the RoundDiv script generates the smooth corners.