React font style

A simple but customizable react font style editor

Demo

When to use this component?

If you just want to get the font style, doesn't care about the text content, this component can do the trick.
All the toolbars, text content is customizable. It means that you can change in any use case.

Features

• Pure font style editor — Support drag and drop tab
• Highly customizable — all the styles and button is customizable
• Pluggable toolbar button — Add extra toolbar button to meet your usage

Table of Contents

• Get started
  • Required Webpack configuration
• Usage
  • Minimal setup
  • Customized example
• Props
  • Custom config
• References
• Todo
• License

Get started

Install it with yarn or npm.

$ yarn add react-font-style

Required Webpack configuration

Currently, this component import css in the component. You need to use webpack css-loader to bundle the file. Or it will fail.

The example webpack setting:

{
  test: /\.css$/,
  loaders: [
    'style-loader',
    'css-loader?modules'
  ]
}

Usage

Minimal setup

import React, {Component} from 'react';
import FontStyle from 'react-font-style';
 
class Basic extends Component {
  handleChange(style) {
    // do something when style change
  }
 
  render() {
    return (
      <FontStyle onChange={this.handleChange}/>
    )
  }
}

Customized example

You can control display which button, the style when user click the button and add extra toolbar button (seems like plugin).

import React, {Component} from 'react';
import FontStyle from 'react-font-style';
import ButtonGroup from 'react-font-style/lib/ui/ButtonGroup';
import IconButton from 'react-font-style/lib/ui/IconButton';
 
class Plugin extends React.Component {
  render() {
    return (
      {/* Use react-font-style/lib component to make sure buttons are same style */}
      <ButtonGroup>
        <IconButton iconClassName="icon-extra" {/* define the icon class in your css file */}
                    onMouseDown={() => alert('this is a pluggable button')}/>
      </ButtonGroup>
    )
  }
}
 
class Customized extends Component {
  handleChange(style) {
    // do something when style changes
  }
 
  render() {
    return (
      <FontStyle onChange={this.handleChange}
                 defaultStyle={{backgroundColor: '#333', color: '#b6a4a4'}}
                 customizedPlugin={<Plugin/>}
                 customConfig={{
                    display: [
                      'INLINE_STYLE_BUTTONS',
                      'FONT_SIZE_DROPDOWN'
                    ],
                    FONT_SIZE_DROPDOWN: [
                      {
                        type: 'font-1',
                        label: 'font-1',    
                        style: {
                          fontSize: '1em'
                        }
                      },
                      {
                        type: 'font-3',
                        label: 'font-3',    
                        style: {
                          fontSize: '3em'
                        }
                      }
                    ]
                 }}/>
    )
  }
}

Props

props	type	default
onChange *	function	(style) => {}	The only required props. Trigger when style change.
defaultStyle	object	{}	the initial style
text	string	ABCD	the display text of the editor
textComponent	Component	null	The different from `text` props is `textComponent` will replaced whole editor. You can control the display editor on your own.
customizedPlugin	Component	null	The extra toolbar button. Note: `react-font-style` will not control the style change of plugin component. It means that you need to write your own `onChange` function.
customConfig	object	reference	Go Custom config for more detail.

Custom config

The default custom config is here.

By changing this config, you can decide which button you want to display. But remember, you CANNOT add other display button to this list. If you want to add another toolbar button which is not supported by this component, you should use customizedPlugin to add it.

The mechanism of dealing with your custom config and default config is through Object.extend(). It will do the shallow merge of custom config and default config.

Thus, for example, if you just want to display INLINE_STYLE_BUTTONS. Here is what you pass:

<FontStyle customConfig={{display: ['INLINE_STYLE_BUTTONS']}}/>

If you want to display all of the buttons, but you want to change the font size style. You want to use em as the unit.

<FontStyle customConfig={{
  FONT_SIZE_DROPDOWN: [
    {
      type: 'font-1',
      label: 'font-1',    
      style: {
        fontSize: '1em'
      }
    },
    {
      type: 'font-3',
      label: 'font-3',    
      style: {
        fontSize: '3em'
      }
    }
  ]
}}/>

So that's it. It's fully customizable.

References

This lib is referenced a lot from react-rte.

For my personal use case, I don't need a full editor. The only thing I want to know is the style. That's why I created this component.

Todo

• [] write more test
• [] extract the css from the component to remove webpack dependency

License

MIT @ctxhou