About
Well it's quite simple, I lovesvg backgrounds, Steve Schoger has on HeroPatterns. I've been copy pasting from that site for a while now. And I got tired.
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
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
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-pityUsage
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',
];