react-font-style
v0.0.11
Published
React font style editor
Downloads
67
Readme
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
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.
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