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.
-
create-react-app
Set up a modern web app by running one command. -
formik
Build forms in React, without the tears ๐ญ [Moved to: https://github.com/jaredpalmer/formik] -
react-boilerplate
:fire: A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices. -
styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress ๐ -
react-hook-form
๐ React Hooks for form state management and validation (Web + React Native) -
electron-react-boilerplate
A Foundation for Scalable Cross-Platform Apps -
apollo-client
:rocket: ย A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server. -
react-relay
Relay is a JavaScript framework for building data-driven React applications. -
recompose
A React utility belt for function components and higher-order components. -
react-redux-universal-hot-example
A starter boilerplate for a universal webapp using express, react, redux, webpack, and react-transform -
classnames
A simple javascript utility for conditionally joining classNames together -
react-redux-starter-kit
Get started with React, Redux, and React-Router!. -
redux-form
A Higher Order Component using react-redux to keep form state in a Redux store -
react-jsonschema-form
A React component for building Web forms from JSON Schema. -
react-router-redux
Ruthlessly simple bindings to keep react-router and redux in sync. -
Formily
Alibaba Group Unified Form Solution -- Support React/ReactNative/Vue2/Vue3 -
react-final-form
๐ High performance subscription-based form state management for React -
react-responsive
CSS media queries in react - for responsive design, and more. -
aphrodite
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation -
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) -
reflux
A simple library for uni-directional dataflow application architecture with React extensions inspired by Flux -
mobx-react
React bindings for MobX. Create fully reactive components. -
react-hot-boilerplate
Minimal live-editing example for React -
hypernova
A service for server-side rendering your JavaScript views -
react-css-modules
Seamless mapping of class names to CSS modules inside of React components. -
wouter
๐ฅข A minimalist-friendly ~1.5KB routing for React and Preact. Nothing else but HOOKS. -
react-server
:rocket: Blazing fast page load and seamless navigation. -
generator-react-webpack
Yeoman generator for ReactJS and Webpack -
react-refetch
A simple, declarative, and composable way to fetch data for React components -
formsy-react
A form input builder and validator for React JS -
react-isomorphic-starterkit
Create an isomorphic React app in less than 5 minutes. -
redux-auth-patch
Complete token authentication system for react + redux that supports isomorphic rendering. -
react-redux-form
Create forms easily in React with Redux. -
redux-router
Redux bindings for React Router โ keep your router state inside your Redux store -
essential-react
A minimal skeleton for building testable React apps using Babel -
fluxible
A pluggable container for universal flux applications. -
cerebral
Declarative state and side effects management for popular JavaScript frameworks
Appwrite - The Open Source Firebase alternative introduces iOS support
* 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.