react-state-focus alternatives and similar libraries
Based on the "Code Design" category.
Alternatively, view react-state-focus alternatives based on common mentions on social networks and blogs.
-
styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress π -
query
π€ Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query. -
formik
DISCONTINUED. Build forms in React, without the tears π [Moved to: https://github.com/jaredpalmer/formik] -
react-boilerplate
π₯ A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices. -
nx
Build system, optimized for monorepos, with plugins for popular frameworks and tools and advanced CI capabilities including caching and distribution. -
apollo-client
:rocket: Β A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server. -
react-redux-universal-hot-example
A starter boilerplate for a universal webapp using express, react, redux, webpack, and react-transform -
Formily
π±π 𧩠Cross Device & High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3 -
stitches
[Not Actively Maintained] CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience. -
reflux
A simple library for uni-directional dataflow application architecture with React extensions inspired by Flux -
surveyjs
Free Open-Source JavaScript form builder library with integration for React, Angular, Vue, jQuery, and Knockout that lets you load and run multiple web forms, or build your own self-hosted form management system, retaining all sensitive data on your servers. You have total freedom of choice as to the backend, because any server + database combination is fully compatible. -
nwb
A toolkit for React, Preact, Inferno & vanilla JS apps, React libraries and other npm modules for the web, with no configuration (until you need it) -
aphrodite
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation -
redux-auth-patch
Complete token authentication system for react + redux that supports isomorphic rendering.
Nutrient - The #1 PDF SDK Library

* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of react-state-focus or a related project?
README
React state focus
Install
NPM:
$ npm install --save react-state-focus
YARN:
$ yarn add react-state-focus
Usage
- Lens
That's a base class for all other classes in this package.
You can use it for example, for propTypes
validation.
- StateBoundLens
This class creates a lens for a part of component's state:
import { StateBoundLens } from 'react-state-focus';
// ... in your component
constructor() {
this.state = { user: 1 }
const lens = new StateBoundLens(this, 'user');
}
// .. that can be used later
console.log(this.lens.view());
// => 1
this.lens.set(2)
console.log(this.state.user)
// => 2
- PropertyLens
This class creates an abstract lens that can be applied on immutable
record
(or map, or absolutely anything that supports []
to get an attribute and .set(prop, value)
to set)
import { Record } from 'immutable';
import { PropertyLens } from 'react-state-focus';
const User = Record({ email: '' });
const user = new User({ email: '[email protected]' });
const emailLens = new PropertyLens('email');
emailLens.view(user)
// => '[email protected]'
newUser = emailLens.set('new-email', user);
emailLens.view(newUser)
// => 'new-email'
- LensChain
That's a class that does composition under the hood.
import { StateBoundLens, PropertyLens, LensChain } from 'react-state-focus';
class YourForm extends React.Component {
constructor(props, context) {
super(props, context);
this.state = { user: new User() };
this.lens = new LensChain(
new StateBoundLens(this, 'user')
);
}
render() {
const { lens } = this;
return (
<form>
<EmailInput lens={lens.chain(new PropertyLens('email'))} />
<ProfileInput lens={lens.chain(new PropertyLens('profile'))} />
</form>
);
}
}
EmailInput
may look like:
(props) =>
<input type="text" value={props.lens.view()} onChange={(e) => props.lens.set(e.target.value)}
This class also has a shortcut .chain(new PropertyLens(attribute))
-> .chainProperty(attribute)
.
- LensBoundComponent
LensBoundComponent
is a Higher-order component that prevents redundant updates
when lens returns the same value. It does a ===
comparison between previous and current values.
import { Lens, LensBoundComponent } from 'react-state-focus';
const Checkbox = ({ lens }) => (
<input
type="checkbox"
checked={lens.view()}
onChange={e => lens.set(e.target.checked)}
/>
)
Checkbox.propTypes = {
lens: PropTypes.instanceOf(Lens)
}
export default LensBoundComponent(Checkbox);
See tests/
directory for more specific details.
Also a demo repo is available.