reactate
Advanced tools
Readme
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
yarn add reactate
npm i reactate --save
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 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
// 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('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
// 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.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
/*
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
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')
/*
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)
FAQs
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 and date-fns
The npm package reactate receives a total of 21 weekly downloads. As such, reactate popularity was classified as not popular.
We found that reactate demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
This episode of the Risky Biz podcast discusses how the rise of small open source packages and the shift towards individual maintainers makes the ecosystem more vulnerable to supply chain attacks.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.