react-text-style
v0.3.5
Published
React text style editor
Downloads
27
Readme
react-text-style
A simple but customizable react text style editor
Demo
When to use this component?
If you only want to get the text style, doesn't care about the text content, this component can meet your requirement. All the toolbars, text content is customizable. It means that you can change in any use case.
Features
- Pure text style editor — Support most of the text toolbar
- Highly customizable — all the styles and buttons are customizable
- Pluggable toolbar button — Extra toolbar button to meet your specific usage
Table of Contents
Get started
Install it with yarn or npm.
$ yarn add react-text-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 TextStyle from 'react-text-style';
class Basic extends Component {
handleChange(style) {
// do something when style change
}
render() {
return (
<TextStyle 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 TextStyle from 'react-text-style';
import ButtonGroup from 'react-text-style/lib/ui/ButtonGroup';
import IconButton from 'react-text-style/lib/ui/IconButton';
class Plugin extends React.Component {
render() {
return (
{/* Use react-text-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 (
<TextStyle 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.assign()
. 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:
<TextStyle 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.
<TextStyle 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