react-font-style/docs/root.js

React font style editor

import React from 'react';
import ReactDOM from 'react-dom';
import FontStyle from '../src';
import ButtonGroup from '../src/ui/ButtonGroup';
import IconButton from '../src/ui/IconButton';

class CustomizedPlugin extends React.Component {
  render() {
    return (
      <ButtonGroup>
        <IconButton iconClassName="icon-extra"
                    onMouseDown={() => alert('this is a pluggable button')}/>
      </ButtonGroup>
    )
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      style: {}
    }
  }

  handleChange = (style) => {
    this.setState({style});
  }

  render() {
    return (
      <div style={{display: 'flex', marginTop: '50px', flexDirection: 'column', width: '60%', margin: '20px auto'}}>
        <FontStyle onChange={this.handleChange}
          defaultStyle={{backgroundColor: '#333', color: '#b6a4a4', fontWeight: 'bold', fontSize: '72px', lineHeight: 1.5, textAlign: 'center'}}
          customizedPlugin={<CustomizedPlugin/>}/>
        <hr/>
        <h4>Style:</h4>
        {Object.keys(this.state.style).map(key =>
          <div key={key}>{key}: {this.state.style[key]}</div>
        )}
      </div>
    )
  }
}

ReactDOM.render(
  <App/>,
  document.getElementById('root')
);

if (module.hot) {
  module.hot.accept();
}