material.font.features
Version:
Material UI component for displaying opentype font features.
93 lines (61 loc) • 3.11 kB
Markdown
# Material Font Features
A React component that displays a ui for choosing the opentype font features of a font. The component then provides a string you can use in CSS rules to display the font with the selected font features. Depends on [MUI](https://mui.com/). If you use a different UI framework, you can build you own using [opentype.features.js](https://www.npmjs.com/package/opentype.features.js).
[](https://hg.sr.ht/~hindlemail/material.font.features/browse/LICENSE?rev=tip)
[](https://builds.sr.ht/~hindlemail/material.font.features?)
## Installation
```sh
npm install --save material.font.features
```
This assumes you are using [npm](https://www.npmjs.com/) as your package manager.
Requires:
@mui/material: >= 5
react: >= 17
## Usage
```js
// Example
import React from 'react';
import './App.css';
import FontFeatures from 'material.font.features'
function App() {
const [settings, setSettings] = React.useState('');
return (
<div className="App">
<h2>font-feature-settings : {settings};</h2>
<br />
<FontFeatures fontUrl={'Andika-Regular.ttf'} settings={settings} onSettingsChanged={(newSettings) => setSettings(newSettings)} />
</div>
);
}
export default App;
```
App.css:
```css
.font-features-container
{
display: flex;
flex-direction: column;
}
.font-features-entry
{
padding-left: 10px;
}
```
## API
**FontFeatures**
| props | description | type | default |
| ---------- | --------------------------- | ------ | ------- |
| settings | the default font feature values | string | |
| settingsFormat | format of the settings props | SettingsFormat | SettingsFormat.CSS |
| fontFile | file path to font file | string | |
| fontUrl | url to the font file | string | |
| fontData | font file binary data | ArrayBuffer | |
| fontFeatures | pre-extracted font data. | Feature[] | |
| showHidden | show options normally hidden to the user | boolean | false |
| onSettingsChanged| event that fires when user changes feature values. | Function | |
Only set one of fontFile, fontUrl, fontData or fontFeatures.
Feature type is defined in [opentype.features.js](https://www.npmjs.com/package/opentype.features.js)
**legacySettingsToCss(settings: string)**
Convert `SettingsFormat.LEGACY` settings to `SettingsFormat.CSS`
## Styling
The container div has class ".font-features-container"
Each option div has class ".font-features-entry"