react-cursor

2.0.15 • Public • Published

react-cursor

Immutable state for React.js

react-cursor hello-world in a fiddle

live demo

What is react-cursor

Cursors are a tool for working with recursive or deeply nested data, immutably. react-cursor is a javascript port of an abstraction that I first saw in ClojureScript. Cursors let your app hold all its state at the root of the UI tree; thus the root is stateful, and all downtree views are stateless.

Project Maturity

master is stable, there is a full test suite.

API

Cursor interface has three methods: value, swap and refine.

  • cur.value() return the value in the cursor at some path.
  • cur.refine(path, ...paths) return a cursor nested inside another cursor
  • cur.swap(f) apply f to the value in the cursor value and puts returned value into the backing store

For frequently used swap functions, see the bundled update-in dependency: see here. Cursor instances have optional syntax sugar for the swap fns provided by update-in; see CursorOperations.js

FAQ

  • Cursors have value semantics, don't mutate values that come out of a cursor
  • Equal cursors are === for easy and efficient optimized rendering (see hello world jsfiddle for example)
  • You should read the source! The core cursor abstraction is 8 lines of code
  • There is an undocumented alternate implementation, RefCursor, which has reference semantics, this is only useful for working with legacy mutable code

License

react-cursor is governed under the MIT License.

Attributions

react-cursor was built by Daniel Miladinov and Dustin Getz.

Package Sidebar

Install

npm i react-cursor

Weekly Downloads

7

Version

2.0.15

License

MIT

Last publish

Collaborators

  • dustingetz