@alexseitsinger/react-text-components

Some generic React components for displaying text

Usage no npm install needed!

<script type="module">
  import alexseitsingerReactTextComponents from 'https://cdn.skypack.dev/@alexseitsinger/react-text-components';
</script>

README

Text Components

Components for displaying text. Best used with a global font-size: 10px.

Installation

yarn add @alexseitsinger/react-text-components

Exports

setTheme

Set the configuration settings for the components to use.

import { setTheme } from "@alexseitsinger/react-text-components"

setTheme({
  normalSize: 14,
  dark: "#666",
  darker: "#444",
  darkest: "#222",
  light: "#AAA",
  lighter: "#CCC"
  lightest: "#EEE",
})

Headings

All headings have font: inherit and font-weight: 600

Name Description
BigHeading h3 tag with font-size: <NORMAL_SIZE> + 6px
BiggerHeading h2 tag with font-size: <NORMAL_SIZE> + 12px
BiggestHeading h1 tag with font-size: <NORMAL_SIZE> + 18px
SmallHeading h4 tag with font-size: <NORMAL_SIZE> - 1px
SmallerHeading h5 tag with font-size: <NORMAL_SIZE> - 2px
SmallestHeading h6 tag with font-size: <NORMAL_SIZE> - 3px

Sizes

All sizes accept the following props:

Name Description Default Required?
isBlock Use display: block undefined no
Name Description
NormalText span tag with font-size: <NORMAL_SIZE>
BigText span tag with font-size: <NORMAL_SIZE> + 2px
BiggerText span tag with font-size: <NORMAL_SIZE> + 4px
BiggestText span tag with font-size: <NORMAL_SIZE> + 6px
SmallText span tag with font-size: <NORMAL_SIZE> - 1px
SmallerText span tag with font-size: <NORMAL_SIZE> - 2px
SmallestText span tag with font-size: <NORMAL_SIZE> - 3px

Weights

Name Description
BoldText span tag with font-weight: 500
BoldestText span tag with font-weight: 600

Colors

All colors require the theme to be set at runtime via setTheme.

Name Description
DarkText span tag with color: <DARK>
DarkerText span tag with color: <DARKER>
DarkestText span tag with color: <DARKEST>
LightText span tag with color: <LIGHT>
LighterText span tag with color: <LIGHTER>
LightestText span tag with color: <LIGHTEST>

Special

Name Description
InsetText span tag with color: <DARK> and text-shadow: 0 1px 0 #FFFFFF
SuperText span tag using both BoldestText and SmallerText with text-transform: uppercase