No description, website, or topics provided.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
tests
.editorconfig
.gitignore
.npmignore
.nvmrc
karma.conf.js
karma.specs.js
package-lock.json
package.json
readme.md
tsconfig.json
webpack.config.js

readme.md

immview-react-connect

Functions to connect immview an Atom or Observable to a React component.

connect is best for connecting many instances of the component to a single source component is best for more complex scenarios like connecting to multiple source or where a component instance is meant to make more calculations.

Installation

npm i immview-react-connect --save

component usage

import { Atom, Combine } from 'immview'
import { component } from 'immview-react-connect'
import * as React from 'react'

const Chest = component(
    (props$, state$) => (
        state$.next({ 'open': 'trea' }),
        state$.next({ 'sesame' : 'sure' }),
        new Combine({
            props: props$,
            state: state$,
        }).map(
            ({props, vault}) => (
                <div>{
                    props.key.split('').map(key => state[key]).join('')
                }</div>
            )
        )
    )
)

const SecretDiscovererWithKey = () => (
    <Chest key="open sesame" />
)

connect usage

import { Atom } from 'immview'
import { connect } from 'immview-react-connect'
import * as React from 'react'

const Vault$ = new Atom({ 'open sesame': 'treasure' })

const SecretChest = connect(
    ({ children }) => (
        <div>{children}</div>
    ),
    Vault$,
    (Vault, props) => ({
        children: Vault[props.secretKey]
    })
)

const SecretDiscovererWithKey = () => (
    <SecretChest secretKey="open sesame" />
)