Random CSS

Randomize your style.

Installation

npm i -D random-css

Quick Start

Import the RandomElement corresponding to the HTML element you want to randomize.

In this example, a <div> will be created. Its borderWidth will remain fixed at 1rem, while the borderColor, borderRadius, and borderStyle properties will be randomized.

import { RandomDiv } from "random-css";

function MyComponent() {
  return (
    <RandomDiv
      fixedStyle={{borderWidth: "1rem"}}
      style={[
        "borderColor",
        "borderRadius",
        "borderStyle"
      ]}
    >
      my super awesome div content!!!
    </RandomDiv>
  );
}

Suppose you wanted to specify which border styles will be used.

<RandomDiv
  fixedStyle={{borderWidth: "1rem"}}
  style={[
    "borderColor",
    "borderRadius",
    {
      borderStyle: {
        keywords: [
          "dashed",
          "dotted",
          "double",
          "groove",
          "solid"
        ]
      }
    }
  ]}
>
  dude, check out these border styles!
</RandomDiv>

Components

There is a RandomElement component for most HTML tags.

HTML Tag	RandomElement
a	RandomA
abbr	RandomAbbr
address	RandomAddress
area	RandomArea
article	RandomArticle
aside	RandomAside
audio	RandomAudio
b	RandomB
base	RandomBase
bdi	RandomBdi
bdo	RandomBdo
blockquote	RandomBlockquote
body	RandomBody
button	RandomButton
br	RandomBr
canvas	RandomCanvas
caption	RandomCaption
cite	RandomCite
code	RandomCode
col	RandomCol
colgroup	RandomColgroup
data	RandomData
datalist	RandomDatalist
dd	RandomDd
del	RandomDel
details	RandomDetails
dfn	RandomDfn
dialog	RandomDialog
div	RandomDiv
dl	RandomDl
dt	RandomDt
em	RandomEm
embed	RandomEmbed
fieldset	RandomFieldset
figcaption	RandomFigcaption
figure	RandomFigure
footer	RandomFooter
form	RandomForm
h1	RandomH1
h2	RandomH2
h3	RandomH3
h4	RandomH4
h5	RandomH5
h6	RandomH6
head	RandomHead
header	RandomHeader
hgroup	RandomHgroup
hr	RandomHr
html	RandomHtml
i	RandomI
iframe	RandomIframe
img	RandomImg
input	RandomInput
ins	RandomIns
kbd	RandomKbd
label	RandomLabel
legend	RandomLegend
li	RandomLi
link	RandomLink
map	RandomMap
mark	RandomMark
main	RandomMain
menu	RandomMenu
meta	RandomMeta
meter	RandomMeter
nav	RandomNav
noscript	RandomNoscript
object	RandomObject
ol	RandomOl
optgroup	RandomOptgroup
option	RandomOption
output	RandomOutput
p	RandomP
picture	RandomPicture
pre	RandomPre
progress	RandomProgress
q	RandomQ
rp	RandomRp
rt	RandomRt
ruby	RandomRuby
s	RandomS
samp	RandomSamp
script	RandomScript
search	RandomSearch
section	RandomSection
select	RandomSelect
slot	RandomSlot
small	RandomSmall
source	RandomSource
span	RandomSpan
strong	RandomStrong
style	RandomStyle
sub	RandomSub
summary	RandomSummary
sup	RandomSup
table	RandomTable
tbody	RandomTbody
td	RandomTd
template	RandomTemplate
textarea	RandomTextarea
tfoot	RandomTfoot
th	RandomTh
thead	RandomThead
time	RandomTime
title	RandomTitle
tr	RandomTr
track	RandomTrack
u	RandomU
ul	RandomUl
var	RandomVar
video	RandomVideo
wbr	RandomWbr

RandomString

RandomString is a special component. Given a string, it renders a container div containing one div for each character in the string. The config passed to the style prop is applied to each character div. The container div is styled such that the space between the characters remains relatively stable despite changes in size, border, etc.

For example, this:

<RandomString text="random css" />

Is rendered like this:

<div class="random-css-string" style="...">
  <div class="random-css-character" style="...">
    r
  </div>
  <div class="random-css-character" style="...">
    a
  </div>
  <div class="random-css-character" style="...">
    n
  </div>
  <div class="random-css-character" style="...">
    d
  </div>
  <div class="random-css-character" style="...">
    o
  </div>
  <div class="random-css-character" style="...">
    m
  </div>
  <div class="random-css-character" style="..."
  >
  </div>
  <div class="random-css-character" style="...">
    c
  </div>
  <div class="random-css-character" style="...">
    s
  </div>
  <div class="random-css-character" style="...">
    s
  </div>
</div>

Configuration

CSS Properties

animation

<RandomDiv
  style={{
    animation: {
      directions: [
        "alternate",
        "alternate-reverse",
        "normal",
        "reverse",
      ],
      durationMax: 3000,
      durationMin: 300,
      easingFunctions: [
        "cubic-bezier",
        "ease",
        "ease-in",
        "ease-out",
        "ease-in-out",
        "linear",
        "step-end",
        "step-start",
        "steps",
      ],
      fillModes: [
        "backwards",
        "both",
        "forwards",
      ],
      iterationCount: {
        infinite: true,
        infiniteProbability: 0.5,
        integersOnly: false,
        max: 3,
        min: 0.25,
      },
      stepPositions: [
        "end",
        "jump-both",
        "jump-end",
        "jump-none",
        "jump-start",
        "start",
      ],
      transformations: [
        "rotate",
        "scaleDown",
        "scaleUp",
        "skewX",
        "skewXY",
        "skewY",
      ],
    }
  }}
>
  my rad animated div content!
</RandomDiv>

directions: array

"alternate"
"alternate-reverse"
"normal"
"reverse"

durationMax: integer

The maximum value that may be generated for transition-duration.

External: 1-3 (s)
Inline: 300-3000 (ms)

Must be greater than or equal to durationMax.

durationMin: integer

The minimum value that may be generated for transition-duration.

External: 1-3 (s)
Inline: 300-3000 (ms)

Must be less than or equal to durationMax.

easingFunctions: array

"cubic-bezier"
"ease"
"ease-in"
"ease-out"
"ease-in-out"
"linear"
"step-end"
"step-start"
"steps"

fillModes: array

"backwards"
"both"
"forwards"

iterationCount: object

infinite: boolean

Whether the keyword "infinite" may be used.

infiniteProbability: float

The probability that the keyword "infinite" will be used.

Must be between 0 and 1, inclusive.

integersOnly: boolean

If true, then only whole numbers will be used for iteration counts. This option is only meaningful when using inline CSS. When using external CSS, only integers are supported.

max: float / integer

The maximum value that may be generated for iteration count.

External: Must be a whole number between 1 and 3, inclusive.
Inline: Must be a float or integer between 0.25 and 3, inclusive.

Must be greater than or equal to min.

min: float / integer

The minimum value that may be generated for iteration count.

External: Must be a whole number between 1 and 3, inclusive.
Inline: Must be a float or integer between 0.25 and 3, inclusive.

Must be less than or equal to max.

stepPositions: array

Jump terms to be used with the steps easing function.

"end"
"jump-both"
"jump-end"
"jump-none"
"jump-start"
"start"

transformations: array

"rotate"
"scaleDown"
"scaleUp"
"skewX"
"skewXY"
"skewY"

backgroundColor, borderColor, color, textDecorationColor

// external is false by default.

<RandomDiv
  style={{
    backgroundColor: {
      rMin: 0,
      rMax: 255,
      gMin: 0,
      gMax: 255,
      bMin: 0
      bMax: 255,
      alpha: true,
      aMin: 0,
      aMax: 1,
    },
  }}
>
  my rad div content
  with a randomized background color!
</RandomDiv>

/**
 * When using an external stylesheet,
 * specify color keywords instead of
 * rgba values.
 */

<RandomDiv
  external={true}
  style={{
    backgroundColor: {
      colorKeywords: [
        "Aquamarine",
        "CornflowerBlue",
        "DeepSkyBlue",
        "FireBrick",
        "Indigo",
        "MediumSeaGreen",
        "PapayaWhip",
        "SteelBlue",
        "Turquoise",
      ],
    },
  }}
>
  my rad div content
  with a randomized background color,
  using an external stylesheet!
</RandomDiv>

alpha: boolean

If true, the optional alpha argument will be passed to rgb().

aMax: float

The maximum alpha value that may be generated.

Must be between 0 and 1, inclusive.

Must be greater than or equal to aMin.

aMin: float

The minimum alpha value that may be generated.

Must be between 0 and 1, inclusive.

Must be less than or equal to aMax.