React-font-style NPM

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

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

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.