@react-md/typography
Advanced tools
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.
If you'd like to change the typography values, check out the SassDoc page on the documentation site.
npm install --save @react-md/typography
You should check out the full documentation for live examples and more customization information, but an example usage is shown below.
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"));
3.0.0 (2021-08-13)
This release should be relatively simple for most consumers of this library since the main breaking change is dropping support for node-sass and requiring sass since node sass has been deprecated as well as removing deprecated variables, hooks, and components.
Most users should be able to run the following commands to upgrade to v3.0.0:
npm update react-md
npm uninstall node-sass
npm install sass
Or with yarn
yarn add react-md
yarn remove node-sass
yarn add sass
In addition, there is now partial support for the new Sass module system with the react-md package which also simplifies the import usage and has a slight build performance improvement for large projects.
To start using the new module system, update all the @import statements as shown below:
-@import '~@react-md/theme/dist/mixins';
-@import '~@react-md/utils/dist/mixins';
-// other react-md imports
+@use 'react-md' as *;
// No other changes required!
If you override variables within react-md:
-@import '~@react-md/theme/dist/color-palette';
-$rmd-theme-light: false;
-$rmd-theme-primary: $rmd-purple-500;
-$rmd-theme-secondary: $rmd-pink-a-200;
-
-@import '~react-md/dist/styles';
+@use '@react-md/theme/dist/color-palette' as color;
+@use 'react-md' as * with (
+ $rmd-theme-light: false,
+ $rmd-theme-primary: color.$rmd-theme-purple-500,
+ $rmd-theme-secondary: color.$rmd-theme-pink-a-200,
+);
+
+@include react-md-utils;
Check out the updated customizing your theme documentation, #1214, or 958f34f for more in-depth examples.
$rmd-theme-dark-elevation now defaults to true instead of falsenode-sass is no longer supported and users must switch to sassInteractionModeListener since it was an alias for UserInteractionModeListenerResizeObserver component and useResizeObserverV1 implementationTooltipHoverModeConfig component$rmd-card-dark-elevation-bordered-background-color variableTooltipped componentuseIndeterminateChecked is now an object of optionssass since it's deprecated (126fb5a)defaults to true (b371337)sass usage with: @use 'react-md'; (787bfb5)@use (68e8c6b)react-md/dist/_everything.scss (c7177e6)sassdoc and variables to use everything.scss (a0f0699)sass (5376be1)useIndeterminateChecked (6b7871f)Tooltipped component (6dca9b1)typedoc API in navigation tree (c388ba6)@use imports (958f34f)defaults (b2269ff)sass instead of node-sass (d8ddf51)react-md (c0f25f7)FAQs
The base package for including typography for react-md.
The npm package @react-md/typography receives a total of 1,575 weekly downloads. As such, @react-md/typography popularity was classified as popular.
We found that @react-md/typography demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.