stagync-react v0.1.4

stagync-react

StagyncReact creates a wrapper to easily use Stagync with React through connectors.

Exeample

ProfileModel.js

import {Model} from 'stagync'
import Memory from 'stagync-storage-memory'

export default new Model({
  database: 'app-database',
  table: 'profile',
  storage: Memory,
  schema: {
    firstName: {
      type: 'string',
      default: ''
    }
  }
})

ProfileComponent.js

import React, {Component} from 'react'
import Stagync from 'stagync-react/src'
import ProfileModel from './ProfileModel'

class ProfileComponent extends Component {
  constructor(props) {
    super(props)

    this.state = {
      firstName: ''
    }
  }

  setFirstName = ({target: {value: firstName}}) => {
    this.setState({firstName})
  }


  render() {
    const {firstName} = this.state

    return (
      <input type="text" onChange={this.setFirstName} placeholder='First name' defaultValue={firstName}/>
    )
  }
}


const StagyncProfileComponent = new Stagync(ProfileModel, ProfileComponent, ['firstName'])


export default StagyncProfileComponent

Now every time the "firstName" state is changed within the ProfileComponent, it will be updated on all components connected to the ProfileModel.

Easy!