Package Exports

react-rounder

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-rounder) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Rounder

license downloads size peer dependecy

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