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] -
styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress ๐ -
react-boilerplate
:fire: A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices. -
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. -
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. -
react-redux-starter-kit
Get started with React, Redux, and React-Router!. -
recompose
A React utility belt for function components and higher-order components. -
react-jsonschema-form
A React component for building Web forms from JSON Schema. -
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 -
redux-form
A Higher Order Component using react-redux to keep form state in a Redux store -
react-router-redux
Ruthlessly simple bindings to keep react-router and redux in sync. -
Formily
๐ฑ๐ ๐งฉ Cross Device & High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3 -
react-final-form
๐ High performance subscription-based form state management for React -
stitches
CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience. -
react-responsive
CSS media queries in react - for responsive design, and more. -
hypernova
A service for server-side rendering your JavaScript views -
mobx-react
React bindings for MobX. Create fully reactive components. -
reflux
A simple library for uni-directional dataflow application architecture with React extensions inspired by Flux -
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) -
react-hot-boilerplate
Minimal live-editing example for React -
react-css-modules
Seamless mapping of class names to CSS modules inside of React components. -
aphrodite
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation -
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. -
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. -
react-refetch
A simple, declarative, and composable way to fetch data for React components -
generator-react-webpack
Yeoman generator for ReactJS and Webpack -
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-router
Redux bindings for React Router โ keep your router state inside your Redux store -
react-redux-form
Create forms easily in React with Redux. -
redux-auth-patch
Complete token authentication system for react + redux that supports isomorphic rendering. -
fluxible
A pluggable container for universal flux applications. -
cerebral
Declarative state and side effects management for popular JavaScript frameworks
AWS Cloud-aware infrastructure-from-code toolbox [NEW]
* 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.