How to use functional component (Hook)

[Aristóteles Coutinho]

Is it possible to work in the format of hook components?

Have an example? (-:

[mogavin]

Hi @aristotelesbr2014 ! What kind of hook integration are you looking for ? MegadraftEditor is a React component, so it can be used with hooks without problem.

[Davis Jones]

@aristotlelesbr214 here's a basic example of Megadraft built with a functional component + React hook:

import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import { MegadraftEditor, editorStateFromRaw } from 'megadraft'

const Megadraft = props => {
  
  const [editorState, setEditorState] = useState(editorStateFromRaw(null));
    
  const onChange = editorState => {
      setEditorState(editorState)
  };

    return (
        <div>
        <h5 className="blue-text">Megadraft</h5>
        <MegadraftEditor
            editorState={editorState}
            onChange={onChange}
            placeholder="Hello, this is some placeholder text"
        />
        </div>
    )
}

export default Megadraft;

[MKoroshun]

This is somewhat related question. I am trying to build a custom plugin using hooks.

import SomePluginButton from "./Button";
import SomePluginBlock from "./Block";
...

Button.js:

export default function SomePluginButton(props) {
    const [state, setState] = useState({
        some_state: false
    });
    return ....
}

Would result in TypeError: Object(...) is not a function

[mogavin]

Hi, @mikekoro !

We need more details on how to reproduce your error. But as an example of how hooks can work in plugins I modified the src/plugins/image/ImageButton.js file in dev mode:

import React, { useState, Component } from "react";

import icons from "../../icons";
import insertDataBlock from "../../insertDataBlock";

export default function ImageButton (props) {
  const [icon, setIcon] = useState('image');
  const changeIcon = () => setIcon('other');

  return (
    <button
      className={props.className}
      type="button"
      onClick={changeIcon}
      title={props.title}
    >
      {icon === 'image'
        ? <icons.ImageIcon className="sidemenu__button__icon" />
        : <icons.ErrorIcon className="sidemenu__button__icon" />
      }
    </button>
  );
}

Result:

[Aristóteles Coutinho]

thanks for the help guys!

[Richard Joel Garcia]

Thanks @ydax, you helped me!!! 🚀