What is @leafygreen-ui/typography?
@leafygreen-ui/typography is a React component library that provides a set of typography components designed to align with MongoDB's design system. It allows developers to easily implement consistent and accessible typography styles in their applications.
What are @leafygreen-ui/typography's main functionalities?
Basic Typography
This feature allows you to use predefined typography components like H1 and Body to create headings and body text with consistent styling.
import { H1, Body } from '@leafygreen-ui/typography';
function App() {
return (
<div>
<H1>Heading 1</H1>
<Body>Body text goes here.</Body>
</div>
);
}
Customizing Typography
This feature allows you to customize the typography components by adding custom CSS classes to change their appearance.
import { H2, Subtitle } from '@leafygreen-ui/typography';
function CustomTypography() {
return (
<div>
<H2 className="custom-heading">Custom Heading</H2>
<Subtitle className="custom-subtitle">Custom Subtitle</Subtitle>
</div>
);
}
// CSS
.custom-heading {
color: #4caf50;
}
.custom-subtitle {
font-style: italic;
}
Responsive Typography
This feature demonstrates how to create responsive typography that changes based on the screen size using media queries.
import { H3, Overline } from '@leafygreen-ui/typography';
import { useMediaQuery } from 'react-responsive';
function ResponsiveTypography() {
const isMobile = useMediaQuery({ maxWidth: 767 });
return (
<div>
<H3>{isMobile ? 'Mobile Heading' : 'Desktop Heading'}</H3>
<Overline>{isMobile ? 'Mobile Overline' : 'Desktop Overline'}</Overline>
</div>
);
}
Other packages similar to @leafygreen-ui/typography
typography
The 'typography' package is a powerful toolkit for building websites with beautiful typography. It provides a wide range of customization options and plugins to enhance the typography of your site. Compared to @leafygreen-ui/typography, it offers more flexibility and is not tied to a specific design system.
styled-components
The 'styled-components' package allows you to write actual CSS code to style your components. It provides a way to create reusable, styled typography components. While it does not offer predefined typography components like @leafygreen-ui/typography, it gives you the freedom to create custom styles.
material-ui
The 'material-ui' package is a popular React UI framework that includes a comprehensive set of typography components. It follows Google's Material Design guidelines and offers a wide range of customization options. Compared to @leafygreen-ui/typography, it provides a more extensive set of UI components beyond just typography.
Typography
Installation
Yarn
yarn add @leafygreen-ui/typography
NPM
npm install @leafygreen-ui/typography
Peer Dependencies
Package | Version |
---|
@leafygreen-ui/leafygreen-provider | ^1.1.0 |
Example
import { H1, H2, Subtitle, Body, InlineCode, InlineKeyCode, Disclaimer, Overline } from '@leafygreen-ui/typography';
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<Subtitle>Subtitle</Subtitle>
<Body weight="medium">Body</Body>
<InlineCode>Code</InlineCode>
<>
<InlineKeyCode>CTRL</InlineKeyCode>
<InlineCode>+</InlineCode>
<InlineKeyCode>C</InlineKeyCode>
</>
<Disclaimer>Disclaimer</Disclaimer>
<Overline>Overline</Overline>
<Link href="http://mongodb.design">MongoDB.design</Link>
Output HTML
<h1 class="leafygreen-ui-wbskfk">Heading 1</h1>
<h2 class="leafygreen-ui-1t0mh6j">Heading 2</h2>
<h3 class="leafygreen-ui-1t0mh6j">Heading 3</h3>
<h6 class="leafygreen-ui-1dmxpt6">Subtitle</h6>
<div class="leafygreen-ui-wkgw79">Body</div>
<code class="leafygreen-ui-18bk0d8">Code</code>
<code class="leafygreen-ui-1vl51l4">CTRL</code
><code class="leafygreen-ui-1vl51l4">+</code
><code class="leafygreen-ui-1vl51l4">C</code>
<small class="leafygreen-ui-1cggyhz">Disclaimer</small>
<div class="leafygreen-ui-vezyzr">Overline</div>
<a
href="http://mongodb.design"
target="_blank"
class="leafygreen-ui-1toaa4e"
data-leafygreen-ui="anchor-container"
>
<span>MongoDB.design</span>
<svg
width="16px"
height="16px"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<title>Open in New Tab</title>
</svg>
</a>
Properties
All props extend the HTMLElementProps of their root tag, however the below components accept extra props
Component | Root |
---|
H1 | h1 |
H2 | h2 |
H3 | h3 |
Subtitle | h6 |
Body | p |
InlineCode | code |
InlineKeyCode | code |
Disclaimer | small |
Overline | p |
Link | a |
Label | label |
Description | p |
Label | p |
H1
Prop | Type | Description | Default |
---|
darkMode | boolean | Determines if the component renders in dark mode | false |
as | keyof JSX.IntrinsicElements | Element to render the component as. Note: This will supersede the behavior of any other props. | 'h1' |
H2
Prop | Type | Description | Default |
---|
darkMode | boolean | Determines if the component renders in dark mode | false |
as | keyof JSX.IntrinsicElements | Element to render the component as. Note: This will supersede the behavior of any other props. | 'h2' |
H3
Prop | Type | Description | Default |
---|
darkMode | boolean | Determines if the component renders in dark mode | false |
as | keyof JSX.IntrinsicElements | Element to render the component as. Note: This will supersede the behavior of any other props. | 'h3' |
Subtitle
Prop | Type | Description | Default |
---|
darkMode | boolean | Determines if the component renders in dark mode | false |
as | keyof JSX.IntrinsicElements | Element to render the component as. Note: This will supersede the behavior of any other props. | 'h6' |
Body
| Prop | Type | Description | Default |
| -------------- | ----------------------------- | -------------------------------------------------------------------------------------------------- | --------------------------------------------- | ----------- |
| weight
| 'regular' | 'medium'
| font-weight applied to typography element | 'regular'
|
| darkMode
| boolean
| Determines if the component renders in dark mode | false
|
| as
| keyof JSX.IntrinsicElements
| Element to render the component as. Note: This will supersede the behavior of any other props. | 'p'
|
| baseFontSize
| 13
| 16
| font-size applied to typography element | Defaults to value set by LeafyGreen Provider. |
InlineCode
Prop | Type | Description | Default |
---|
href | string | undefined | If an href prop is passed to InlineCode it will be rendered with an a tag wrapping the code tag. Otherwise, it'll simply render as a code tag. | |
darkMode | boolean | Determines if the component renders in dark mode | |
baseFontSize | 13 | 16 | font-size applied to typography element | Defaults to value set by LeafyGreen Provider. |
InlineKeyCode
Prop | Type | Description | Default |
---|
darkMode | boolean | Determines if the component renders in dark mode | |
baseFontSize | 13 | 16 | font-size applied to typography element | Defaults to value set by LeafyGreen Provider. |
Disclaimer
Prop | Type | Description | Default |
---|
darkMode | boolean | Determines if the component renders in dark mode | false |
Error
Prop | Type | Description | Default |
---|
darkMode | boolean | Determines if the component renders in dark mode | false |
Overline
Prop | Type | Description | Default |
---|
as | React.ElementType | The component or Element to render the component as. Note: This will supersede the behavior of any other props. | p |
darkMode | boolean | Determines if the component renders in dark mode | false |
Link
Prop | Type | Description | Default |
---|
arrowAppearance | 'hover' , 'persist' , 'none' | Displays a right arrow adjacent to the anchor tag. When set to persist the arrow will always be present. When set to hover , the arrow will only appear when hovering over the arrow. | 'none' |
hideExternalIcon | boolean | Hides the external icon when the current host name is different from the host of the destination URL | false |
darkMode | boolean | Determines if the component renders in dark mode | false |
as | keyof JSX.IntrinsicElements | Element to render the component as. Note: This will supersede the behavior of any other props. | 'a' |
baseFontSize | 13 | 16 | font-size applied to typography element | Defaults to value set by LeafyGreen Provider. |
Label
Prop | Type | Description | Default |
---|
darkMode | boolean | Determines if the component renders in dark mode | false |
disabled | boolean | Determines whether the component should appear disabled | false |
baseFontSize | 13 | 16 | font-size applied to typography element | Defaults to value set by LeafyGreen Provider. |
Description
Prop | Type | Description | Default |
---|
darkMode | boolean | Determines if the component renders in dark mode | false |
baseFontSize | 13 | 16 | font-size applied to typography element | Defaults to value set by LeafyGreen Provider. |