React font picker google7/28/2023 ![]() So much so that when it comes time to revamp GlyphSearch, I’ll probably give it the React treatment. While it took some time to become familiar with React, and JSX resides in some kind of uncanny valley, the componentization and render methods made it worthwhile. If you want help out, the project is on GitHub. But given this is my first time using React, there are surely many more optimizations to be made. ![]() Performance was a priority given how resource-intensive it is to browse hundreds of fonts, and using React was one of the keys. Give FontCDN a try and let me know what you think. Click a button to copy it to your clipboard. You can even browse fonts that have been recommended around the web, a feature inspired by Typekit.Ĭlick a font to view the import and style code. You can sort and filter the 700+ fonts available on Google Fonts any which way. Rather than deeply exploring and comparing different fonts within Google Fonts or within a prototyping tool like Typecast, the goal of FontCDN is to quickly grab the fonts you’re interested in and try them out within the context of your actual project. The result is FontCDN.įontCDN addresses a different use case than what Google Fonts seems to be designed for. Last week I tried my hand at building the Google Fonts interface that I wanted to use. Add fixed bars at the top and bottom of the page and you end up with the most crucial bits below the fold, maybe even buried in a hidden tab. “Which one do I click to start using the font?” Hint: it’s not the bright blue button that beckons.įinally, Google Fonts includes a lot of directions and tips that are useful for the first-time user, but after the 100th visit, only serve to waste space. Second, the Google Fonts interface is peppered with buttons, many unlabelled, that always give me a half-second pause. “I thought I was already on Google Fonts,” you might wonder. The page you’ll land on, while admittedly chock full of interesting history and statistics, doesn’t include the information you’re there for.įor that, you’ll need to click the “Open in Google Fonts” link in the top right. As a devoted user of Google Fonts, I’d like to add a few of my own pet peeves to the conversation.įirst, one of the most common ways people arrive on Google Fonts is through a web search. While Google Fonts is a valuable tool, its interface leaves much to be desired, a fact that hasn’t escaped the attention of folks like Laura Franz or Sascha Grief. What would otherwise be a choice between sticking to a small handful of web safe fonts or wrangling WOFFs, OTFs, and TTFs is solved with just two lines of code. Like most web developers, Google Fonts is an indispensable resource for me. * The Material design ripple effect itself */ĭiv.ReactFontPicker_Wrapper. * Elements that have the Material design click ripple effect */ * Option (font) in the dropdown option list */ * The option that is displayed in the main field */ * Label when a font is selected (floating above the selected option) */ Here are the component CSS classnames for quick reference: /* The component UI wrapper */ ReactFontPicker rule is not found in the DOM. The default one is injected dynamically if the. You can supply your own stylesheet if the default Material Design-style doesn't work for you. It should take one argument which is the selected font's name as string. When a font is selected and the option list is opened again, the selected font text will display this color.Ī function that's called when a font is selected. See previews of each font in the font option list when selecting fonts The list indices should be strings e.g "Arial" The component works as standalone even if you don't supply it with any properties. Var FontPicker = require('react-font-picker') Ĭonsole.log(selectedFont) // Will log font name (string) when being selectedĪll properties are optional. ![]() Just require the 'react-font-picker' package which exports the component. If you use this, make sure you have already included React, and it is available as a global variable. You can also use the standalone build by including dist/react-font-picker.js in your page. ![]() The easiest way to use react-font-picker is to install it from NPM and include it in your own React build process (using Browserify, Webpack, etc). To build the examples locally, run: npm install It exports the component that works as standalone with local component state or with Redux. This is a ReactJS font picker component with Material Design styling as default. ![]()
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |