Reactate

Reactate is a magical unbelievably simple React state container, it is built on top of Redux , it combines the philosophy of Mobx , power of lodash , is.js and most of the functions of date-fns

📦 install

yarn add reactate
npm i reactate --save

Usage

With Reactate you don't need to create any store, or to set any observerable! All what you need is these three functions watch, get and set

import {watch, get, set} from 'reactate'

// add this to the class component
@watch('path.to.the.value')

// getting value
get('path.to.value') // => value

// setting the value, all watcher components will re-render
set('path.to.value', value) // => void

Complete example

/*
  complete TODO list examle that uses watch, get, set and array
  import React, {Component} from 'react'
  click below to show all
*/

import React, {Component} from 'react'
import {watch, get, set, array} from 'reactate'

@watch('app.todos')
class TODO extends Component {
  state = {}
  render() {
    return (
      <div>
        <ul>
          {/* get (path, default value) */}
          {get('app.todos', []).map(({id, completed, text}, index) =>
            (<li
              key={'todo-item-' + id}
              onClick={() => {
                // set (path , value)
                set(`app.todos[${index}].completed`, !completed)
              }}
              style={{
                textDecoration: completed ? 'line-through' : 'none'
              }}
            >
              {text}
            </li>)
          )}
        </ul>
        <input
          value={this.state.text}
          onChange={e => this.setState({text: e.target.value})}
        />
        <span
          onClick={() => {
            let {text} = this.state
            this.state.text = ''
            // array.push( path to the arry, value to be pushed)
            array.push('app.todos', {
              text,
              id: new Date().getTime(),
              completed: false
            })
          }}
        >
          add{' '}
        </span>
      </div>
    )
  }
}
export default TODO

reactate.watch(value:array)

Watches one or many part of the state

// component will re-render when any of value1 update
// or any of it's children.
// can be any type of data array|object|string|number
@reactate.watch('path.to.value1')

// component will watch value1 and value2
@reactate.watch('path.to.value1', 'path.to.value2')

reactate.get(value:string, value:any)

Get value from state using lodash

reactate.get('path.to.value1')
=> // return the target value

 // get(path, defaultValue) is the default value
reactate.get('path.to.value1', {})
=> // return the target value or {} if undefined

 // get(path, defaultValue) is the default value
reactate.get('path.to.array.arrayname[].0.value1', {})
=> // return the target value or {} if undefined


// User arrays for path to simplify creating complex path.

reactate.get(['path.$.value1', 'to'])
=> // replace $ by to then return the target value

reactate.get(['path.to.array[id=$]', 99], {})
=> // replace $ by 99 then return the target value or {} if undefined

reactate.get(['pathto.array[id=$].pathto.subarray[name=$]', 99, 'hello'], {})
=> // replace first $ by 99  and second $ by hello then return the target
   // value or {} if undefined

reactate.set(value:string, value:any)

Set value in state using lodash

// any component that is watching value1 or any of it's
// parents will rerender ex: @watch('path.to.value1' or
// 'path.to' or 'path')
reactate.set('path.to.value1', 'hello world!')

 // set(path, value)
reactate.set('path.to.array.arayname[0].name', 'hello')

// User arrays for path to simplify creating complex path.

reactate.get(['path.to.array[id=$].name', 99], 'hello')
=> // replace $ by hello then return the target value or {} if undefined

reactate.set(['pathto.array[id=$].pathto.subarray[name=$].count', 99, 'hello'], 10)
=> // replace first $ by 99  and second $ by hello then set count value to 10

reactate.boolean.function_name(value:string)

reactate.boolean.false('path.to.value1')
=> // set value1 to false

reactate.boolean.true('path.to.value1')
=> // set value1 to true

// if type of value1 is not boolean or not undefined it ignores the command
reactate.boolean.toggle('path.to.value1')
=> // toggle the value of value1

reactate.is.function_name(value:string)

Checks if the given value type match the specified function.

click for more details is.js

/*
  for more details check https://date-fns.org/ for more details..
*/

reactate.is.num('path.to.value')
reactate.is.real('path.to.value')
reactate.is.notSet('path.to.value')
reactate.is.emptyObj('path.to.value')
reactate.is.string('path.to.value')
reactate.is.set('path.to.value')
reactate.is.array('path.to.value')
reactate.is.arrOf('path.to.value')
reactate.is.obj('path.to.value')
reactate.is.isObjLike('path.to.value')
reactate.is.plainObj('path.to.value')
reactate.is.equal('path.to.value')
reactate.is.instanceof('path.to.value')
reactate.is.null('path.to.value')
reactate.is.undefined('path.to.value')
reactate.is.arguments('path.to.value')
reactate.is.arraylike('path.to.value')
reactate.is.bool('path.to.value')
reactate.is.true('path.to.value')
reactate.is.element('path.to.value')

reactate.is.num('path.to.value')
reactate.is.real('path.to.value')
reactate.is.notSet('path.to.value')
reactate.is.emptyObj('path.to.value')
reactate.is.string('path.to.value')
reactate.is.set('path.to.value')
reactate.is.array('path.to.value')
reactate.is.arrOf('path.to.value')
reactate.is.obj('path.to.value')
reactate.is.isObjLike('path.to.value')
reactate.is.plainObj('path.to.value')
reactate.is.hostObj('path.to.value')
reactate.is.fn('path.to.value')
reactate.is.promise('path.to.value')
reactate.is.gen('path.to.value')
reactate.is.webpackCli('path.to.value')
reactate.is.toTypes('path.to.value')
reactate.is.type('path.to.value')
reactate.is.defined('path.to.value')
reactate.is.equal('path.to.value')
reactate.is.instanceof('path.to.value')
reactate.is.null('path.to.value')
reactate.is.undefined('path.to.value')
reactate.is.arguments('path.to.value')
reactate.is.arraylike('path.to.value')
reactate.is.bool('path.to.value')
reactate.is.true('path.to.value')
reactate.is.element('path.to.value')
reactate.is.number('path.to.value')
reactate.is.decimal('path.to.value')
reactate.is.int('path.to.value')
reactate.is.maximum('path.to.value')
reactate.is.nan('path.to.value')
reactate.is.odd('path.to.value')
reactate.is.gt('path.to.value')
reactate.is.lt('path.to.value')
reactate.is.object('path.to.value')
reactate.is.hash('path.to.value')
reactate.is.base64('path.to.value')
reactate.is.symbol('path.to.value')
reactate.is.any('path.to.value')
reactate.is.domNode('path.to.value')
reactate.is.sameType('path.to.value')
reactate.is.existy('path.to.value')
reactate.is.truthy('path.to.value')
reactate.is.finite('path.to.value')
reactate.is.positive('path.to.value')
reactate.is.affirmative('path.to.value')
reactate.is.caPostalCode('path.to.value')
reactate.is.dateString('path.to.value')
reactate.is.eppPhone('path.to.value')
reactate.is.hexColor('path.to.value')
reactate.is.ipv6('path.to.value')
reactate.is.timeString('path.to.value')
reactate.is.ukPostCode('path.to.value')
reactate.is.usZipCode('path.to.value')
reactate.is.capitalized('path.to.value')
reactate.is.include('path.to.value')
reactate.is.palindrome('path.to.value')
reactate.is.startWith('path.to.value')
reactate.is.day('path.to.value')
reactate.is.future('path.to.value')
reactate.is.inLastMonth('path.to.value')
reactate.is.inLastYear('path.to.value')
reactate.is.inNextWeek('path.to.value')
reactate.is.leapYear('path.to.value')
reactate.is.past('path.to.value')
reactate.is.today('path.to.value')
reactate.is.weekend('path.to.value')
reactate.is.year('path.to.value')
reactate.is.android('path.to.value')
reactate.is.androidTablet('path.to.value')
reactate.is.chrome('path.to.value')
reactate.is.edge('path.to.value')
reactate.is.ie('path.to.value')
reactate.is.ipad('path.to.value')
reactate.is.ipod('path.to.value')
reactate.is.mac('path.to.value')
reactate.is.offline('path.to.value')
reactate.is.opera('path.to.value')
reactate.is.safari('path.to.value')
reactate.is.touchDevice('path.to.value')
reactate.is.windowsTablet('path.to.value')
reactate.is.propertyDefined('path.to.value')
reactate.is.sorted('path.to.value')
reactate.is.setRegexp('path.to.value')
reactate.is.properties('path.to.value')
reactate.is.props('path.to.value')
reactate.is.socialSecurityNumber('path.to.value')
reactate.is.glob('path.to.value')
reactate.is.windows('path.to.value')
reactate.is.realNotEmpty('path.to.value')
reactate.is.emptyStr('path.to.value')
reactate.is.str('path.to.value')
reactate.is.class('path.to.value')
reactate.is.map('path.to.value')
reactate.is.arr('path.to.value')
reactate.is.isObject('path.to.value')
reactate.is.isObjectLike('path.to.value')
reactate.is.plainObject('path.to.value')
reactate.is.hostObject('path.to.value')
reactate.is.function('path.to.value')
reactate.is.bindable('path.to.value')
reactate.is.generator('path.to.value')
reactate.is.ci('path.to.value')
reactate.is.toType('path.to.value')
reactate.is.instanceOf('path.to.value')
reactate.is.a('path.to.value')
reactate.is.empty('path.to.value')
reactate.is.hosted('path.to.value')
reactate.is.instance('path.to.value')
reactate.is.nil('path.to.value')
reactate.is.undef('path.to.value')
reactate.is.args('path.to.value')
reactate.is.boolean('path.to.value')
reactate.is.false('path.to.value')
reactate.is.date('path.to.value')
reactate.is.error('path.to.value')
reactate.is.infinite('path.to.value')
reactate.is.divisibleBy('path.to.value')
reactate.is.integer('path.to.value')
reactate.is.minimum('path.to.value')
reactate.is.even('path.to.value')
reactate.is.ge('path.to.value')
reactate.is.le('path.to.value')
reactate.is.within('path.to.value')
reactate.is.primitive('path.to.value')
reactate.is.regexp('path.to.value')
reactate.is.hex('path.to.value')
reactate.is.all('path.to.value')
reactate.is.char('path.to.value')
reactate.is.json('path.to.value')
reactate.is.windowObject('path.to.value')
reactate.is.falsy('path.to.value')
reactate.is.above('path.to.value')
reactate.is.negative('path.to.value')
reactate.is.under('path.to.value')
reactate.is.alphaNumeric('path.to.value')
reactate.is.creditCard('path.to.value')
reactate.is.email('path.to.value')
reactate.is.hexadecimal('path.to.value')
reactate.is.ipv4('path.to.value')
reactate.is.nanpPhone('path.to.value')
reactate.is.includes('path.to.value')
reactate.is.url('path.to.value')
reactate.is.ip('path.to.value')
reactate.is.endWith('path.to.value')
reactate.is.lowerCase('path.to.value')
reactate.is.space('path.to.value')
reactate.is.upperCase('path.to.value')
reactate.is.dayLightSavingTime('path.to.value')
reactate.is.inDateRange('path.to.value')
reactate.is.inLastWeek('path.to.value')
reactate.is.inNextMonth('path.to.value')
reactate.is.inNextYear('path.to.value')
reactate.is.month('path.to.value')
reactate.is.quarterOfYear('path.to.value')
reactate.is.tomorrow('path.to.value')
reactate.is.weekday('path.to.value')
reactate.is.yesterday('path.to.value')
reactate.is.androidPhone('path.to.value')
reactate.is.blackberry('path.to.value')
reactate.is.desktop('path.to.value')
reactate.is.firefox('path.to.value')
reactate.is.ios('path.to.value')
reactate.is.iphone('path.to.value')
reactate.is.linux('path.to.value')
reactate.is.mobile('path.to.value')
reactate.is.online('path.to.value')
reactate.is.phantom('path.to.value')
reactate.is.tablet('path.to.value')
reactate.is.windowsPhone('path.to.value')
reactate.is.propertyCount('path.to.value')
reactate.is.inArray('path.to.value')
reactate.is.setNamespace('path.to.value')
reactate.is.notReal('path.to.value')
reactate.is.hasProps('path.to.value')
reactate.is.each('path.to.value')
reactate.is.not('path.to.value')

reactate.is.not.....// check is.js
reactate.all.....// check is.js
reactate.any.....// check is.js

reactate.date.is.function_name(value:string)

Checks if the given value type match the specified function.

click for more details date-fns

/*
  for more details check https://date-fns.org/ for more details..
*/

reactate.date.is.date('path.to.date')
reactate.date.is.sameDay('path.to.date')
reactate.date.is.monday('path.to.date')
reactate.date.is.thursday('path.to.date')
reactate.date.is.iSOWeeksInYear('path.to.date')
reactate.date.is.milliseconds('path.to.date')
reactate.date.is.minutes('path.to.date')
reactate.date.is.yesterday('path.to.date')
reactate.date.is.seconds('path.to.date')
reactate.date.is.year('path.to.date')
reactate.date.is.thisHour('path.to.date')
reactate.date.is.thisMinute('path.to.date')
reactate.date.is.thisQuarter('path.to.date')
reactate.date.is.thisWeek('path.to.date')
reactate.date.is.tomorrow('path.to.date')
reactate.date.is.valid('path.to.date')

reactate.date.is.date('path.to.date')
reactate.date.is.dayOfYear('path.to.date')
reactate.date.is.daysInYear('path.to.date')
reactate.date.is.iSODay('path.to.date')
reactate.date.is.iSOWeeksInYear('path.to.date')
reactate.date.is.milliseconds('path.to.date')
reactate.date.is.month('path.to.date')
reactate.date.is.quarter('path.to.date')
reactate.date.is.time('path.to.date')
reactate.date.is.after('path.to.date')
reactate.date.is.equal('path.to.date')
reactate.date.is.friday('path.to.date')
reactate.date.is.lastDayOfMonth('path.to.date')
reactate.date.is.monday('path.to.date')
reactate.date.is.sameDay('path.to.date')
reactate.date.is.sameISOWeek('path.to.date')
reactate.date.is.sameMinute('path.to.date')
reactate.date.is.sameQuarter('path.to.date')
reactate.date.is.sameWeek('path.to.date')
reactate.date.is.saturday('path.to.date')
reactate.date.is.thisHour('path.to.date')
reactate.date.is.thisISOYear('path.to.date')
reactate.date.is.thisMonth('path.to.date')
reactate.date.is.thisSecond('path.to.date')
reactate.date.is.thisYear('path.to.date')
reactate.date.is.today('path.to.date')
reactate.date.is.tuesday('path.to.date')
reactate.date.is.wednesday('path.to.date')
reactate.date.is.withinRange('path.to.date')
reactate.date.is.not('path.to.date')
reactate.date.is.day('path.to.date')
reactate.date.is.daysInMonth('path.to.date')
reactate.date.is.hours('path.to.date')
reactate.date.is.iSOWeek('path.to.date')
reactate.date.is.iSOYear('path.to.date')
reactate.date.is.minutes('path.to.date')
reactate.date.is.yesterday('path.to.date')
reactate.date.is.seconds('path.to.date')
reactate.date.is.year('path.to.date')
reactate.date.is.before('path.to.date')
reactate.date.is.firstDayOfMonth('path.to.date')
reactate.date.is.future('path.to.date')
reactate.date.is.leapYear('path.to.date')
reactate.date.is.past('path.to.date')
reactate.date.is.sameHour('path.to.date')
reactate.date.is.sameISOYear('path.to.date')
reactate.date.is.sameMonth('path.to.date')
reactate.date.is.sameSecond('path.to.date')
reactate.date.is.sameYear('path.to.date')
reactate.date.is.sunday('path.to.date')
reactate.date.is.thisISOWeek('path.to.date')
reactate.date.is.thisMinute('path.to.date')
reactate.date.is.thisQuarter('path.to.date')
reactate.date.is.thisWeek('path.to.date')
reactate.date.is.thursday('path.to.date')
reactate.date.is.tomorrow('path.to.date')
reactate.date.is.valid('path.to.date')
reactate.date.is.weekend('path.to.date')
reactate.date.is.overlappingDaysInRanges('path.to.date')

reactate.if.function_name(value:string, value:string, value:string)

Checks if the given value type match the specified function, if true return first value else return second value

click for more details is.js

/*
  for more details check http://is.js.org/ for more details..
*/

reactate.if.num('path.to.value', value1, value2)
=> // reactate.is.num('path.to.value') ? value1 : value2

// these functions follow the same pattern of the above function
reactate.if.real('path.to.value', value1, value2)
reactate.if.notSet('path.to.value', value1, value2)
reactate.if.emptyObj('path.to.value', value1, value2)
reactate.if.string('path.to.value', value1, value2)
reactate.if.set('path.to.value', value1, value2)
reactate.if.array('path.to.value', value1, value2)
reactate.if.arrOf('path.to.value', value1, value2)
reactate.if.obj('path.to.value', value1, value2)
reactate.if.isObjLike('path.to.value', value1, value2)
reactate.if.plainObj('path.to.value', value1, value2)
reactate.if.equal('path.to.value', value1, value2)
reactate.if.instanceof('path.to.value', value1, value2)
reactate.if.null('path.to.value', value1, value2)
reactate.if.undefined('path.to.value', value1, value2)
reactate.if.arguments('path.to.value', value1, value2)
reactate.if.arraylike('path.to.value', value1, value2)
reactate.if.bool('path.to.value', value1, value2)
reactate.if.true('path.to.value', value1, value2)
reactate.if.element('path.to.value', value1, value2)