React Rounder

A collection of rounding components based on styled-components

Demo

Preview

Installation

With npm:

npm install --save react-rounder

With Yarn:

yarn add react-rounder

Usage

Each loader has their own default properties. You can overwrite the defaults by passing props into the loaders.

Basic Example

import { Jelly } from "react-rounder/Jelly";

function App() {
 
  return (
    <Jelly size={40} color="orange" />
  );
}

export default App;

Show/Hide Example

import React, { useState } from "react";
import { Jelly } from "react-rounder/Jelly";

function App() {
  const [showRounder, setShowRounder] = useState(true);

  return (
    <>
      <button onClick={() => setShowRounder(prev => !prev)}>
        Toggle Rounder!
      </button>

      <Jelly size={40} color="orange" show={showRounder} />
    </>
  );
}

export default App;

Props

Default props for all rounders:

show: true; // boolean
color: "#818CF8"; // any css color value
size: 48; // px 

Contributing

• Pull requests are always welcome
• For bugs or new rounder requests please create an issue

License

MIT