About

Well it's quite simple, I love💖 those svg backgrounds, Steve Schoger has on HeroPatterns. I've been copy pasting from that site for a while now. And I got tired.😓 So, this is supposed to simplify it. But you know me... I love to share.😄

Props

You'll get to props, leave it for now. Lemme tell you what the name pill-pity has to do with it's function.

Spoiler ——————————————— it's props 😇

The default component creates your pattern with two props; patternFill and patternOpacity.

But you know how Chakra UI makes life easy, and you do bg in place of background, ml for marginLeft, and so on. Well I said, "I should make life easier too".

So I added short form props; patFill and patOpacity. Well then I thought, that's not enough, Let's just make it easiest🙃 after all.

Trust me you're not seeing it yet. But damn, I'm the laziest thing I know, so I said "tune it up", just a little more, and it became pill and pity😂 And there it was; the name staring back at me.✨

I hope you enjoyed the story, but all I was trying to say is; all six props are accepted. And they override themselves in the order they are provided.

Happy Coding!

Install

npm i --save pill-pity
#or
yarn add pill-pity

Usage

import PillPity from 'pill-pity';
import { Flex } from '@chakra-ui/react';

export default () => {
  return (
    <PillPity pattern="topography" as={Flex} justify="center" align="center">
      I am a Box with Pattern
    </PillPity>
  );
};

NB:* PillPity Composes Box, so all BoxProps are accepted.

Props Reference

| Prop | Description | Default | | -------------- | ------------------------------------------------------------------------------------------------------------------------------------- | -------------- | | pattern | The Hero Pattern to be applied | —— | | patternFill | The foreground color applied to the pattern. It accepts all color formats; hsl, rgb, hex, you name it, plus chakra color tokens | gray.600 | | patternOpacity | The opacity of the pattern foreground | 0.4 |

You should apply a bgColor to complement the pattern. If none is applied, the default is gray.100

Patterns

The available patterns.

Preview them Here

[
  'jigsaw',
  'overcast',
  'formal-invitation',
  'topography',
  'texture',
  'jupiter',
  'architect',
  'cutout',
  'hideout',
  'graph-paper',
  'yyy',
  'squares',
  'falling-triangles',
  'piano-man',
  'pie-factory',
  'dominos',
  'hexagons',
  'charlie-brown',
  'autumn',
  'temple',
  'stamp-collection',
  'death-star',
  'church-on-sunday',
  'i-like-food',
  'overlapping-hexagons',
  'four-point-stars',
  'bamboo',
  'bathroom-floor',
  'cork-screw',
  'happy-intersection',
  'kiwi',
  'lips',
  'lisbon',
  'random-shapes',
  'steel-beams',
  'tiny-checkers',
  'x-equals',
  'anchors-away',
  'bevel-circle',
  'brick-wall',
  'fancy-rectangles',
  'heavy-rain',
  'overlapping-circles',
  'plus',
  'rounded-plus-connected',
  'volcano-lamp',
  'wiggle',
  'bubbles',
  'cage',
  'connections',
  'current',
  'diagonal-stripes',
  'flipped-diamonds',
  'floating-cogs',
  'glamorous',
  'houndstooth',
  'leaf',
  'lines-in-motion',
  'moroccan',
  'morphing-diamonds',
  'rails',
  'rain',
  'skulls',
  'squares-in-squares',
  'stripes',
  'tic-tac-toe',
  'zig-zag',
  'aztec',
  'bank-note',
  'boxes',
  'circles-squares',
  'circuit-board',
  'curtain',
  'diagonal-lines',
  'endless-clouds',
  'eyes',
  'floor-tile',
  'groovy',
  'intersecting-circles',
  'melt',
  'overlapping-diamonds',
  'parkay-floor',
  'pixel-dots',
  'polka-dots',
  'signal',
  'slanted-stars',
  'wallpaper',
];