Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Build a basic text editor with Slate and React

    Julian KrispelJulian Krispel
    reactReact

    In this lesson you will learn how to create a basic text editor with Slate and React. I will guide you all the way from installing all necessary modules to using them to create a working React App with a text editor.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 0:00 First of all, let's install Slate, slate-react, slate-plain-serializer, and the mutable npm package.

    0:10 Next, import the editor component from slate-react and render it in your app. Let's see what happens. We get an error because the value prop of the editor component is undefined.

    0:31 First, we'll import the default object from slate-plain-serializer as plain. We'll create an initial value with the deserialize method. We pass the value variable as a prop to the editor component. Now, our editor component can render without throwing an exception.

    1:02 Import the useState hook. Rename value to initialValue because we'll use it with the useState hook to initialize our state. useState gives us back value, which is our state, and set value, which we use to update the state.

    1:21 Add the onChange editor prop and pass it a callback function to update the value with the setValue method. Now, if you click on the text and edit, it will work as expected.

    1:41 The onChange prop will be called whenever the value of the editor changes, which in turn calls the setValue method to update the component state. The component state gets passed onto the value prop of the editor.