React Controllables screenshot

React Controllables

Author Avatar Theme by Matthewwithanm
Updated: 17 Aug 2015
257 Stars

Easily create controllable components

Overview

If you’re a ReactJS developer, you might have faced challenges when it comes to managing the state of components, especially in complex applications involving forms and custom components. Enter react-controllables, a solution that simplifies the process of creating controllable components, allowing state to be managed in a more organized manner. This tool facilitates the creation of “dumb” components that don’t internally manage state but accept props and callbacks to seamlessly share state between different components.

With react-controllables, developers can design versatile components, like a TabBar, that can either manage their own state or share state with other components. This flexibility lets you demo components in isolation while still maintaining the capability to have shared states across various parts of your application.

Features

  • Controlled and Uncontrolled States: Create components that can be both controlled and uncontrolled, allowing for dynamic state management depending on your application’s needs.

  • Higher-Order Component: Use react-controllables to build higher-order components that wrap “dumb” components, making them easier to work with in complex scenarios.

  • Props and Callbacks: Easily pass state management via customizable props and onChange callbacks, streamlining communication between components.

  • Dynamic Initialization: Set initial states using default props without converting the component to a fully controlled one, giving you flexibility during development.

  • Decorator Support: Utilize JavaScript decorators to apply react-controllables elegantly if you’re using a modern transpiler like Babel 5.0 or above.

  • Isolation for Testing: Components can be developed and tested independently, simplifying the demo process and reducing complexity during dev cycles.

  • Compatibility with React Conventions: Maintains consistency with React conventions, making the integration of controlled components feel more intuitive for developers familiar with the framework.