Skip to content

furkanmavili/react-rounder

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.

React Rounder

npm version 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

Buy Me A Coffee