Coolshapes React

Coolshapes provides two ways to render shapes: using a single Global component or using Category-specific components.

1. Global Component

Import the Coolshape component and specify the type (category) and index (specific shape within that category).

2. Category Components

Import specific components for a category (e.g., Star, Ellipse) and pass an index to select a specific shape within that category.

// Global component example
import { Coolshape } from "coolshapes-react";

const App = () => {
  return <Coolshape type="star" index={1} size={48} noise={true} />;
};

// Category component example
import { Star } from "coolshapes-react";

const App = () => {
  return <Star index={1} size={48} />;
};

All components are assigned the default class name coolshapes. You can override this by passing a custom className prop. To make shapes responsive (similar to img elements), you can use CSS like this:

.coolshapes {
  width: 100%;
  max-height: 48px;
}

import { Star } from "coolshapes-react";

export const Shape = () => {
  return <Star className={\"myshape\"} />;
};

You can install the coolshapes-react package using npm or yarn to use the abstract shape components in your React projects.

npm install coolshapes-react

yarn add coolshapes-react

If you are not using a bundler, you can use the UMD build via unpkg. The library is exposed on the window.coolshapes object.

<!doctype html>
<html
  >
  <head>
    <meta charset="UTF-8" />
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://unpkg.com/coolshapes-react/dist/umd/coolshapes.js"></script>
  </head>
  <body
    >
    <div id="root"></div
    <script type="text/babel">
      const domContainer = document.querySelector("#root");
      const root = ReactDOM.createRoot(domContainer);
      const coolshapes = window.coolshapes;
      const Coolshape = coolshapes.Coolshape;
      root.render(<Coolshape />);
    </script>
  </body>
</html>

Use shapeTypes and shapesCount to programmatically access the available shape categories and the number of shapes in each category.

• shapeTypes: An array of category names (e.g., ['star', 'ellipse', ...]).
• shapesCount: An object mapping category names to their respective counts (e.g., { star: 13, ellipse: 12, ... }).

import { shapeTypes, shapesCount } from "coolshapes-react";
// shapeTypes: ['star', 'ellipse', ...]
// shapesCount: { star: 13, ellipse: 12, ... }

Coolshapes contains 115 shapes across the following categories. When passing a category name to the type prop, use lowercase names:

• star (13 shapes)
• triangle (14 shapes)
• moon (15 shapes)
• polygon (8 shapes)
• flower (16 shapes)
• rectangle (9 shapes)
• ellipse (12 shapes)
• wheel (7 shapes)
• misc (11 shapes)
• number (10 shapes - maps to digits 0-9)

The library provides a large collection of pre-defined gradient presets. You can import these presets individually by their specific names (e.g., Gradient1, Gradient2, etc.) from the src/gradients entrypoint.

import { Gradient1, Gradient2 } from './src/gradients';

// Use the imported gradients in your components

The Wheel component is a composite component that renders different variations of wheel shapes based on the provided shape data. It is exported as both the default export and a named export. The component is dynamically resolved using the getComponentWithShapeType utility, which maps specific shape data to their corresponding React components.

import Wheel from './shapes/wheel';

// Use the default export
<Wheel />

// Or use the named export
import { Wheel } from './shapes/wheel';
<Wheel />

The CoolShape component is the primary entrypoint for rendering shapes. It is exported from the main package and serves as the core component for the library.

import { CoolShape } from 'coolshapes-react';

// Usage example (implied by export * from './CoolShape')
<CoolShape />

You can import a collection of predefined shapes from the shapes export or access the raw shape configuration data via shapesData.

import { shapes, shapesData } from 'coolshapes-react';