Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
@fluentui/react-text
Advanced tools
Text is a typography and styling abstraction component that can be used to ensure the consistency of all text across your application.
React Text components for Fluent UI React
The Text component exists to ensure consistency in your application's content by setting fixed sizes and other styles. This package also exports wrappers which ensure your text follows the Fluent design standards of typography.
To use the Text components in your application, you can start by installing the main package of Fluent UI components:
npm install @fluentui/react-components
import { FluentProvider, Text } from '@fluentui/react-components';
const App = () => (
<FluentProvider>
<Text>Fluent UI Text!</Text>
</FluentProvider>
);
Or by installing only the @fluentui/react-text
package. Keep in mind you'll need to install the FluentProvider package as well:
npm install @fluentui/react-text
npm install @fluentui/react-provider
import { FluentProvider } from '@fluentui/react-provider';
import { Text } from '@fluentui/react-text';
const App = () => (
<FluentProvider>
<Text>Fluent UI Text!</Text>
</FluentProvider>
);
Wrappers offer an easy way to use text according to the Fluent Design System while also providing semantic code readability.
Below is an example of the Display wrapper vs using the Text component:
import { Text, Display } from '@fluentui/react-text';
const Example = () => (
<>
<Text size={1000} weight="semibold">
This text is styled like a Display variant.
</Text>
<Display>This text is also styled like a Display variant.</Display>
</>
);
As you can see, using the Display
wrapper is a lot easier to read and provides a clearer visual of the page's layout.
By default, Text and all the typography wrappers render a <span>
element. You should use the as
property to ensure your page has proper semantic elements such as heading or paragraph elements.
<div>
<Subtitle1 as="h1">Subtitle1</Subtitle1>
<Subtitle2 as="h2">Subtitle2</Subtitle2>
<Text as="p">This is simple example</Text>
</div>
This will result in the following DOM structure:
<div>
<h1>Subtitle1</h1>
<h2>Subtitle2</h2>
<p>This is simple example</p>
</div>
For more information about the components, please refer to the API documentation.
For migration information, have a look at the migration guide.
FAQs
Text is a typography and styling abstraction component that can be used to ensure the consistency of all text across your application.
The npm package @fluentui/react-text receives a total of 81,880 weekly downloads. As such, @fluentui/react-text popularity was classified as popular.
We found that @fluentui/react-text demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 12 open source maintainers 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 researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.