tiptap/docs/installation/react.md

92 lines
2.6 KiB
Markdown
Raw Normal View History

---
title: React WYSIWYG
tableOfContents: true
---
2021-01-21 00:58:53 +08:00
# React
2021-01-30 05:05:47 +08:00
## Introduction
The following guide describes how to integrate Tiptap with your [React](https://reactjs.org/) project. Were using [Create React App](https://reactjs.org/docs/getting-started.html) here, but the workflow should be similar with other setups.
2021-01-30 05:05:47 +08:00
## Create React App
### Quickstart
If you just want to get up and running with Tiptap you can use the [Tiptap Create React App template by @alb](https://github.com/alb/cra-template-tiptap) to create a new project with all the steps listed below completed already.
```bash
npx create-react-app my-tiptap-project --template tiptap
```
### Step by step
2021-10-25 20:24:02 +08:00
All steps are listed below, but if you prefer to watch a video weve got something for you, too:
2021-10-29 23:53:12 +08:00
https://tiptap.dev/screencasts/installation/install-tiptap-with-create-react-app
#### 1. Create a project (optional)
Lets start with a fresh React project called `my-tiptap-project`. [Create React App](https://reactjs.org/docs/getting-started.html) will set up everything we need.
```bash
2021-10-21 19:03:04 +08:00
# create a project with npm
npx create-react-app my-tiptap-project
# change directory
cd my-tiptap-project
```
#### 2. Install the dependencies
Time to install the `@tiptap/react` package and our [`StarterKit`](/api/extensions/starter-kit), which has the most popular extensions to get started quickly.
```bash
feat(pm): new prosemirror package for dependency resolving * chore:(core): migrate to tsup * chore: migrate blockquote and bold to tsup * chore: migrated bubble-menu and bullet-list to tsup * chore: migrated more packages to tsup * chore: migrate code and character extensions to tsup * chore: update package.json to simplify build for all packages * chore: move all packages to tsup as a build process * chore: change ci build task * feat(pm): add prosemirror meta package * rfix: resolve issues with build paths & export mappings * docs: update documentation to include notes for @tiptap/pm * chore(pm): update tsconfig * chore(packages): update packages * fix(pm): add package export infos & fix dependencies * chore(general): start moving to pm package as deps * chore: move to tiptap pm package internally * fix(demos): fix demos working with new pm package * fix(tables): fix tables package * fix(tables): fix tables package * chore(demos): pinned typescript version * chore: remove unnecessary tsconfig * chore: fix netlify build * fix(demos): fix package resolving for pm packages * fix(tests): fix package resolving for pm packages * fix(tests): fix package resolving for pm packages * chore(tests): fix tests not running correctly after pm package * chore(pm): add files to files array * chore: update build workflow * chore(tests): increase timeout time back to 12s * chore(docs): update docs * chore(docs): update installation guides & pm information to docs * chore(docs): add link to prosemirror docs * fix(vue-3): add missing build step * chore(docs): comment out cdn link * chore(docs): remove semicolons from docs * chore(docs): remove unnecessary installation note * chore(docs): remove unnecessary installation note
2023-02-03 00:37:33 +08:00
npm install @tiptap/react @tiptap/pm @tiptap/starter-kit
```
2021-11-09 18:56:27 +08:00
If you followed step 1 and 2, you can now start your project with `npm run start`, and open [http://localhost:3000](http://localhost:3000) in your browser.
#### 3. Create a new component
To actually start using Tiptap we need to create a new component. Lets call it `Tiptap` and put the following example code in `src/Tiptap.jsx`.
```jsx
// src/Tiptap.jsx
import { useEditor, EditorContent } from '@tiptap/react'
2021-05-07 00:41:22 +08:00
import StarterKit from '@tiptap/starter-kit'
const Tiptap = () => {
const editor = useEditor({
2021-05-07 00:41:22 +08:00
extensions: [
StarterKit,
],
content: '<p>Hello World!</p>',
})
return (
<EditorContent editor={editor} />
)
}
export default Tiptap
```
#### 4. Add it to your app
Finally, replace the content of `src/App.js` with our new `Tiptap` component.
```jsx
import Tiptap from './Tiptap.jsx'
const App = () => {
return (
<div className="App">
<Tiptap />
</div>
)
}
export default App
```
You should now see a pretty barebones example of Tiptap in your browser.
#### 5. The complete setup (optional)
Ready to add more? Below is a demo that shows how you could set up a basic toolbar. Feel free to take it and start customizing it to your needs:
2021-01-21 00:58:53 +08:00
2021-10-19 00:01:47 +08:00
https://embed.tiptap.dev/preview/Examples/Default