Skip to content

Commit ca10f40

Browse files
committed
docs: readme updates for v5
1 parent 9180a1f commit ca10f40

File tree

1 file changed

+16
-18
lines changed

1 file changed

+16
-18
lines changed

README.md

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# xstate-component-tree [![NPM Version](https://img.shields.io/npm/v/xstate-component-tree.svg)](https://www.npmjs.com/package/xstate-component-tree) [![NPM License](https://img.shields.io/npm/l/xstate-component-tree.svg)](https://www.npmjs.com/package/xstate-component-tree) [![NPM Downloads](https://img.shields.io/npm/dm/xstate-component-tree.svg)](https://www.npmjs.com/package/xstate-component-tree)
22

3-
Utility method to wrap up an [XState](https://xstate.js.org) interpreter and read state meta information so your statechart can be used to create a tree of components to render.
3+
Utility method to wrap up an [XState](https://xstate.js.org) actor and read state meta information so your statechart can be used to create a tree of components to render.
44

55
## Installation
66

@@ -10,26 +10,26 @@ $> npm install xstate-component-tree
1010

1111
## Usage
1212

13-
Create an XState statechart, and then instantiate an XState interpreter with it.
13+
Create an XState statechart, and then instantiate an XState actor with it.
1414

1515
```js
16-
const { Machine, interpret } = require("xstate");
16+
const { createMachine, createActor } = require("xstate");
1717

18-
const statechart = Machine({
18+
const statechart = createMachine({
1919
initial : "one",
2020

2121
states : {
2222
one : {},
2323
},
2424
});
2525

26-
const service = interpret(statechart);
26+
const service = createActor(statechart);
2727
```
2828

2929
Add `meta` objects to each state that you want to represent a component.
3030

3131
```js
32-
Machine({
32+
createMachine({
3333
initial : "one",
3434

3535
states : {
@@ -57,27 +57,27 @@ Props for the components are also supported via the `props` key.
5757
// ...
5858
```
5959

60-
Then pass the interpreter instance and a callback function to this module!
60+
Then pass the actor instance and a callback function to this module!
6161

6262
```js
63-
const { Machine, interpret } = require("xstate");
63+
const { createMachine, createActor } = require("xstate");
6464
const ComponentTree = require("xstate-component-tree");
6565

66-
const statechart = Machine({
66+
const statechart = createMachine({
6767
// ...
6868
});
6969

70-
const service = interpret(statechart);
70+
const actor = createActor(statechart);
7171

72-
new ComponentTree(service, (tree) => {
72+
new ComponentTree(actor, (tree) => {
7373
// ...
7474
});
7575
```
7676

7777
The second argument to the function will be called every time the machine transitions. It will pass the callback a new object representing all the views defined on currently active states, all correctly nested to match the structure of the statechart. Each element in the response will also contain a `path` value corresponding to the the specific state the object represents.
7878

7979
```js
80-
new ComponentTree(service, (tree) => {
80+
new ComponentTree(actor, (tree) => {
8181
/**
8282
*
8383
* tree will be something like this
@@ -211,9 +211,9 @@ import { component } from "xstate-component-tree/component";
211211

212212
### `ComponentTree`
213213

214-
#### `new ComponentTree(interpreter, callback, [options])`
214+
#### `new ComponentTree(actor, callback, [options])`
215215

216-
- `interpreter`, and instance of a xstate interpreter
216+
- `actor`, an instance of a xstate actor
217217
- `callback`, a function that will be executed each time a new tree of components is ready
218218
- `options`, an optional object containing [configuration values](#options) for the library.
219219

@@ -235,19 +235,17 @@ The `callback` functions receives two arguments, the first is your assembled tre
235235

236236
### `ComponentTree` instance methods
237237

238-
#### `.broadcast(eventName | eventObject, payload)`
238+
#### `.broadcast(eventObject, payload)`
239239

240240
Calls the xstate `.send()` method on every running interpreter in the hierarchy. This is especially useful to avoid the use of the `autoforward` option on all of your invoked child machines.
241241

242-
- `eventName` is a string event to be sent
243242
- `eventObject` is an object with a `type` property of the event name, along with other optional fields
244243
- `payload` is an object of optional fields to be added to the event object
245244

246-
#### `.can(eventName | eventObject)`
245+
#### `.can(eventObject)`
247246

248247
Calls the xstate `.can()` method on every running interpreter in the hierarchy.
249248

250-
- `eventName` is a string event to be sent
251249
- `eventObject` is an object with a `type` property of the event name, along with other optional fields
252250

253251
#### `.hasTag(tag)`

0 commit comments

Comments
 (0)