@cloudflare/component-text

Cloudflare Text Component

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@cloudflare/component-text
Minified + gzip package size for @cloudflare/component-text in KB

Readme

@cloudflare/component-text

Cloudflare Text Component

Installation

Installation with yarn is recommended


$ yarn add @cloudflare/component-text

Usage

import React from 'react';
import { Text } from '../../src';

const TextComponent = () => (
  <div>
    <p>
      Specify a <code>size</code>
    </p>
    <Text size="normal">Hello World</Text>
    <Text size="small">Hello World</Text>
    <Text size="normal" weight="semi-bold">
      Hello World
    </Text>
    <Text size="normal" weight="bold">
      Hello World
    </Text>

    <p>
      and/or an <code>align</code>
    </p>
    <Text align="start">Hello World</Text>
    <Text align="center">Hello World</Text>
    <Text align="justify">Hello World</Text>
    <Text align="end">Hello World</Text>

    <p>
      and/or a <code>type</code>
    </p>
    <Text type="info">Hello World</Text>
    <Text type="success">Hello World</Text>
    <Text type="warning">Hello World</Text>
    <Text type="error">Hello World</Text>
    <Text type="muted">Hello World</Text>

    <p>
      and/or a <code>case</code>
    </p>
    <Text case="capitalize">hello world</Text>
    <Text case="titlecase">hello world</Text>
    <Text case="lowercase">Hello World</Text>
    <Text case="uppercase">Hello World</Text>
  </div>
);

export default TextComponent;

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.