API Documentation
Tutorials

Class

State

State

A class representing a unique state

View Source observable-state.js, line 324

Methods

# bind(bindingProps) → {function}

Returns a bound component, the properties of the bound component are extended on use
Parameters:
Name Type Description
bindingProps BoundProps the properties of the binding
See:
  • Bound

View Source observable-state.js, line 508

a bound component
function
Example
const Input = state.bind({component: <input style={{fontSize: '120%'}} />})

function Example() {
    return <div>
        <Input property="firstName"/>
        <Input property="lastName"/>
    </div>
}

# Bind(props) → {function}

A binding target, linking the state to an object
Parameters:
Name Type Description
props BindProps properties

View Source observable-state.js, line 646

the JS component
function
Example
const state = createState("global")
let someState = {id: 1234, name: "Mike"}

function App() {
    return <state.Bind target={someState}>
        <InnerComponents/>
    </state.Bind>
}

# Bound(props) → {function}

Returns a component bound to the state model
Parameters:
Name Type Description
props BoundProps

View Source observable-state.js, line 554

a component to be rendered
function
Example
function SubComponent() {
    return <div>
        <Bound component={<TextField variant="outlined"/>} property="name"/>
    </div>
}

# useBinding(property, defaultValueopt, transformInopt, transformOutopt, updateOnBluropt, extractopt, onChange, attributeopt, eventopt, blurEventopt, targetopt) → {object}

Provides a way of creating binding values for a component
Parameters:
Name Type Attributes Default Description
property string the property of the current state to bind
defaultValue any <optional>
 the default value for the property
transformIn TransformValue <optional>
 a function to transform inbound values
transformOut TransformValue <optional>
 a function to transform outbound values
updateOnBlur any <optional>
 set if the component should only update when it blurs
extract Extractor <optional>
 a function that transforms event values to real values - default version will extract from event.target.value if available, otherwise the value itself
onChange function
attribute string <optional>
 "value" the attribute to bind to
event string <optional>
 "onChange" the event to be bound for changes
blurEvent string <optional>
 "onBlur" the event for blurring
target object <optional>
 an override for the target

View Source observable-state.js, line 254

an object containing the specified value and change function
object
Example
const {props} = state.useBinding()
return <input {...props}/>

# useCalculation(property, dependencies, fn, targetopt)

Creates a calculation that depends on other property values and is automatically updated when they change
Parameters:
Name Type Attributes Description
property string the property to be created
dependencies Array.<string> an array of dependencies for the property, the update function will be passed the values of these
fn function a function that will be called with the dependency values and returns the updated calculation
target any <optional>
 an override for the current target (rarely used)

View Source observable-state.js, line 210

Example
function Component() {
    globalState.useCalculation("profile.fullName", ["profile.firstName", "profile.lastName"],
        (firstName, lastName) => `${firstName} ${lastName}`
    )
}

function Label({value, ...props}) {
    return <div {...props}>{value}</label>
}

const BoundLabel = globalState.bind({component: <Label className={"label"}/> })

function FullNameLabelExample() {
    return <Label property="profile.fullName" />
}

# useChange(property, handler, targetopt)

Provides a handler that is called when a property value has been updated
Parameters:
Name Type Attributes Description
property string the property that is updated
handler function the handler for the property change, it will be called with the updated value
target object <optional>
 an optional target override

View Source observable-state.js, line 170

Example
import debounce from 'lodash/debounce'

function Component() {
    const saveProfile = React.useMemo(()=>debounce(_saveProfile, 300), [])
    globalState.useChange("profile.**", saveProfile)

    function saveProfile(profile) {
        localStorage.setItem("profile", JSON.stringify(profile))
    }
}

# useCurrentPath() → {Array.<string>}

Returns the current path of the context

View Source observable-state.js, line 532

the current path to the bound target
Array.<string>

# useCurrentTarget() → {object}

Returns the current target of the the context

View Source observable-state.js, line 523

the target
object
Example
const current = state.useCurrentTarget()
const copy = JSON.parse(JSON.stringify(current))

# useRefresh(…paths) → {number}

Causes the caller to refresh if any of the paths change
Parameters:
Name Type Attributes Description
paths Array.<string> | string <repeatable>
 the paths to refresh on

View Source observable-state.js, line 480

the current unique id of the refresh
number
Example
function Component() {
    const [style] = globalState.useState("style")
    // Update if any sub property of style changes
    globalState.useRefresh("style.**")
    return <div style={{...style}}>Some Content</div>
}

# useSetter(property, targetopt) → {Setter}

Returns a setter for properties
Parameters:
Name Type Attributes Description
property string the property to set
target any <optional>
 an override for the current value

View Source observable-state.js, line 438

- a value to set other values
Setter
Example
function Component() {
    const setValue = someState.useSetter("some.object.property")
    return <Button onClick={clear}>Clear</Button>
    function clear() {
        setValue({})
    }
}

# useState(property, defaultValueopt, targetopt) → {Array}

Provides access to information in the state that will be updated any time a state change would affect it
Parameters:
Name Type Attributes Description
property string the property path of the state required
defaultValue any <optional>
 a default value for the state
target object <optional>
 an override for the standard state

View Source observable-state.js, line 383

an array containing the state value and an update function
Array
Example
const [name, setName] = state.useState("person.firstName")
return <div onClick={clearFirstName}>{name}</div>
function clearFirstName() {
    setName("")
}