@react-md/typography

@react-md/typography

This package is used to include typography into your application. There are 13 different font styles included with reasonable defaults, but they can also easily be updated with custom values.

This package is mostly for generating the base typography onto different classes throughout your app, but it also exposes Text and TextContainer components to help add typography throughout your app. There is also an accessibility helper component named SrOnly that allows you to display text to screen readers only.

Installation

npm install --save @react-md/typography

Documentation

You should check out the full documentation for live examples and more customization information, but an example usage is shown below.

Usage

import React from "react";
import { render } from "react-dom";
import { Text, TextContainer } from "@react-md/typography";

const App = () => (
  <TextContainer>
    <Text type="headline-1">Headline 1</Text>
    <Text type="headline-2">Headline 2</Text>
    <Text type="headline-3">Headline 3</Text>
    <Text type="headline-4">Headline 4</Text>
    <Text type="headline-5">Headline 5</Text>
    <Text type="headline-6">Headline 6</Text>
    <Text type="subtitle-1">Subtitle 1</Text>
    <Text type="subtitle-2">Subtitle 2</Text>
    <Text type="body-1">Body 1</Text>
    <Text type="body-2">Body 2</Text>
    <Text type="overline">Overline</Text>
    <Text type="caption" component="p">
      Caption
    </Text>
  </TextContainer>
);

render(<App />, document.getElementById("root"));

Changelog

2.6.0 (2021-02-13)

Bug Fixes

• @react-md/layout: floating layout has correct color in dark theme (7fa6b0c)
• @react-md/layout: toggleable layout title now aligns with persistent layouts (8b8efb2)

Features

• @react-md/chip: added support for noninteractable chips (9309985), closes #1046
• @react-md/layout: added prop to control toggleable layouts default visibility (6e4a06d), closes #1066

Documentation

• react-md.dev: slightly better search results (0e3d3f7)

Other Internal Changes

• @react-md/divider: updated test to use the correct act (a621625)
• @react-md/link: added new tests for SkipToMainContent (3f6e866)
• @react-md/utils: Added better dev display names for UserInteractionMode context parts (01f6e3d)
• @react-md/utils: refactored UserInteractionMode hooks and components (af72791)
• changelog: fixed some more changelog/release behavior (e11c0ea)
• coverage: fixed test coverage to include files without tests (ba72630)