evokit-text

3.2.0 • Public • Published

EvoKit - Text

Used for text. Contains one element <Text>


Install

Peer dependencies evokit. More about install

npm install evokit-text --save

Usage

More about usage

import React from 'react';
import { Text } from 'evokit-text';
import 'evokit-text/style.css';
 
const App = () => (
    <Text text-align='center'>
        ...
    </Text>
);

Props

Also supports other valid props of the React Element. More about use props

<Text />

Prop name Default value Possible value Description
text-align left left center right justify Horizontal alignment
text-color null Create theme Text color
text-display inline inline none Display type
text-lheight default default medium large Line spacing
text-size default none inherit default small big h1 h2 h3 h4 h5 h6 Font size
text-style null italic strike underline overline Text style
text-transform none none capitalize lowercase uppercase Text case conversion
text-valign null baseline bottom middle sub super text-bottom text-top top Vertical alignment
text-weight default default thin light medium bold black Font weight
text-wrap normal normal nowrap pre pre-wrap pre-line break ellipsis three-line two-line Transferring and cutting text

Customize

This set of css variables is default, if you want to override one or more value, please use the rules css-variable-usage, define them below the css import.

@custom-media --ek-text-media-small only screen and (min-width: 480px);
@custom-media --ek-text-media-medium only screen and (min-width: 768px);
@custom-media --ek-text-media-large only screen and (min-width: 960px);
@custom-media --ek-text-media-wide only screen and (min-width: 1200px);
@custom-media --ek-text-media-huge only screen and (min-width: 1400px);
 
:root {
    /* base */
    --ek-text-line-height: 1em;
    /* prop 'text-size' */
    --ek-text-size-small: 11px;
    --ek-text-size-default: 13px;
    --ek-text-size-big: 15px;
    --ek-text-size-h1: 24px;
    --ek-text-size-h2: 22px;
    --ek-text-size-h3: 20px;
    --ek-text-size-h4: 18px;
    --ek-text-size-h5: 16px;
    --ek-text-size-h6: 14px;
    /* prop 'text-lheight' */
    --ek-text-line-height-default: var(--ek-text-line-height);
    --ek-text-line-height-medium: 1.25em;
    --ek-text-line-height-large: 1.5em;
}

Live demo

Edit text-usage


text-display

  • inline - displayed as inline
  • none - remove from a document
<Text text-display='none'>
    ...
</Text>

text-size

  • none - value: 0px
  • inherit - inherits the meaning of the parent
  • small - css variable --ek-text-size-small, default value: 11px
  • default - css variable --ek-text-size-default, default value: 13px
  • big - css variable --ek-text-size-big, default value: 15px
  • h1 - css variable --ek-text-size-h1, default value: 24px
  • h2 - css variable --ek-text-size-h2, default value: 22px
  • h3 - css variable --ek-text-size-h3, default value: 20px
  • h4 - css variable --ek-text-size-h4, default value: 18px
  • h5 - css variable --ek-text-size-h5, default value: 16px
  • h6 - css variable --ek-text-size-h6, default value: 14px
<Text text-size='big'>
    ...
</Text>

text-weight

  • default - value: 400
  • thin - value: 100
  • light - value: 300
  • medium - value: 500
  • bold - value: 700
  • black - value: 900
<Text text-weight='bold'>
    ...
</Text>

text-align

  • left - Align text to the left
  • center - Center alignment of text
  • right - Align text to the right
  • justify - Distributes all text evenly across width
<Text text-align='...'></Text>

text-valign

  • top - Align the top edge of the element to the top of the tallest line item.
  • bottom - Aligns the base of the current element at the bottom of the element of the line below it all
  • middle - The alignment of the midpoint of the element at the baseline of the parent plus half the height of the parent element
  • baseline - Aligns the baseline of the current element to the parent's baseline
  • sub - The element is depicted as subscript, in the form of a subscript
  • super - The element is depicted as superscript, in the form of a superscript
  • text-top - The top border of the element is aligned to the highest text element of the current line
  • text-bottom - The bottom border of the element is aligned at the very bottom edge of the current line
<Text text-valign='baseline'>
    ...
</Text>

text-wrap

  • normal - The text is displayed as usual
  • nowrap - All text is displayed in one line
  • pre - Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the <pre> tag in HTML
  • pre-wrap - Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks
  • pre-line - Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks
  • break - Line wrapping is added automatically
  • ellipsis - The text is cut and an ellipsis is added to the end of the line
  • two-line - Text is cut in two lines
  • three-line - Text is cut in three lines
<Text text-wrap='ellipsis'>
    ...
</Text>

text-style

  • italic - Cursive text
  • strike - Creates strikethrough text
  • underline - Sets underlined text
  • overline - The line runs over the text
<Text text-style='strike'>
    ...
</Text>

text-transform

  • none - Does not change the case of characters
  • capitalize - The first character of each word in the sentence will be capitalized
  • lowercase - All text characters are lowercase (lower case)
  • uppercase - All text characters become uppercase (upper case)
<Text text-transform='uppercase'>
    ...
</Text>

text-lheight

  • default - css variable --ek-text-line-height-default, default value: 1em
  • medium - css variable --ek-text-line-height-medium, default value: 1.25em
  • large - css variable --ek-text-line-height-large, default value: 1.5em
<Text text-lheight='large'>
    ...
</Text>

text-color

Set the THEME_NAME depending on the theming

<Text text-color={THEME_NAME}>
    ...
</Text>

Package Sidebar

Install

npm i evokit-text

Weekly Downloads

940

Version

3.2.0

License

MIT

Unpacked Size

45.8 kB

Total Files

12

Last publish

Collaborators

  • docccdev