1
0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-02-08 09:01:01 +01:00
Ian Storm Taylor adb2678732
Rename "state" to "value" everywhere (#1313)
* rename state to value in slate core, as deprecation

* rename all references to state to value in slate core

* migrate slate-base64-serializer

* migrate slate-html-serializer

* migrate slate-hyperscript

* migrate slate-plain-serializer

* migrate slate-prop-types

* migrate slate-simulator

* fix change.setState compat

* deprecate references to state in slate-react

* remove all references to state in slate-react

* remove `value` and `schema` from props to all components

* fix default renderPlaceholder

* fix tests

* update examples

* update walkthroughs

* update guides

* update reference
2017-10-27 13:39:06 -07:00

86 lines
1.6 KiB
Markdown

# `slate-hyperscript`
```js
import h from 'slate-hyperscript'
import { createHyperscript } from 'slate-hyperscript'
```
A hyperscript helper for writing Slate documents with JSX!
## Example
```js
/** @jsx h */
import h from 'slate-hyperscript'
const value = (
<value>
<document>
<block type="paragraph">
A string of <mark type="bold">bold</mark> in a <inline type="link" data={{ src: 'http://slatejs.org' }}>Slate</inline> editor!
</block>
<block type="image" data={{ src: 'https://...' }} isVoid />
</document>
</value>
)
```
```js
/** @jsx h */
import { createHyperscript } from 'slate-hyperscript'
const h = createHyperscript({
blocks: {
paragraph: 'paragraph',
image: {
type: 'image',
isVoid: true,
}
},
inlines: {
link: 'link',
},
marks: {
b: 'bold',
},
})
const value = (
<value>
<document>
<paragraph>
A string of <b>bold</b> in a <link src="http://slatejs.org">Slate</link> editor!
</paragraph>
<image src="https://..." />
</document>
</value>
)
```
## Exports
### `h`
`Function`
The default export of `slate-hyperscript` is a barebones hyperscript helper that you can immediately start using to create Slate objects.
### `createHyperscript`
`createHyperscript(options: Object) => Function`
The other export is a `createHyperscript` helper that you can use to create your own, smarter, schema-aware hyperscript helper. You can pass it `options` that tell it about your schema to make creating objects much terser.
```js
{
blocks: Object,
inlines: Object,
marks: Object,
creators: Object,
}
```