# react-pintu > A flow-based React application framework for everyone. Latest version **0.1.2** (published 2017-06-24) · MIT license · 0 weekly downloads ## Install ```sh npm install react-pintu pnpm add react-pintu yarn add react-pintu bun add react-pintu ``` Provides the command `new-container`. ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.2 | | Published | 2017-06-24 | | First published | 2017-06-24 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 48 | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | no | | GitHub stars | 4 | | Author | Lin Han | | Maintainers | hanlindev | ## Links - npm: https://www.npmjs.com/package/react-pintu - Repository: https://github.com/hanlindev/react-pintu - npm.io page: https://npm.io/package/react-pintu ## Dependencies (48) - [qs](https://npm.io/package/qs.md) ^6.4.0 - [react](https://npm.io/package/react.md) ^15.5.4 - [redux](https://npm.io/package/redux.md) ^3.6.0 - [lodash](https://npm.io/package/lodash.md) ^4.17.4 - [radium](https://npm.io/package/radium.md) ^0.18.2 - [history](https://npm.io/package/history.md) ^4.6.1 - [@types/qs](https://npm.io/package/@types/qs.md) ^6.2.31 - [immutable](https://npm.io/package/immutable.md) ^3.8.1 - [node-sass](https://npm.io/package/node-sass.md) ^4.5.3 - [react-dom](https://npm.io/package/react-dom.md) ^15.5.4 - [classnames](https://npm.io/package/classnames.md) ^2.2.5 - [prop-types](https://npm.io/package/prop-types.md) ^15.5.8 - [tinycolor2](https://npm.io/package/tinycolor2.md) ^1.4.1 - [material-ui](https://npm.io/package/material-ui.md) ^0.18.0 - [react-redux](https://npm.io/package/react-redux.md) ^5.0.4 - [redux-thunk](https://npm.io/package/redux-thunk.md) ^2.2.0 - [@types/react](https://npm.io/package/@types/react.md) ^15.0.23 - [@types/redux](https://npm.io/package/@types/redux.md) ^3.6.0 - [query-string](https://npm.io/package/query-string.md) ^4.3.4 - [react-router](https://npm.io/package/react-router.md) 3 - [redux-logger](https://npm.io/package/redux-logger.md) ^3.0.1 - [@types/lodash](https://npm.io/package/@types/lodash.md) ^4.14.63 - [@types/radium](https://npm.io/package/@types/radium.md) ^0.18.21 - [@types/history](https://npm.io/package/@types/history.md) ^4.5.0 - [path-to-regexp](https://npm.io/package/path-to-regexp.md) ^1.7.0 - [redux-devtools](https://npm.io/package/redux-devtools.md) ^3.4.0 - [@types/immutable](https://npm.io/package/@types/immutable.md) ^3.8.7 - [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^15.5.0 - [react-router-dom](https://npm.io/package/react-router-dom.md) ^4.1.1 - [@types/classnames](https://npm.io/package/@types/classnames.md) ^0.0.32 - [@types/prop-types](https://npm.io/package/@types/prop-types.md) ^15.5.1 - [@types/tinycolor2](https://npm.io/package/@types/tinycolor2.md) ^1.1.1 - [@types/material-ui](https://npm.io/package/@types/material-ui.md) ^0.17.6 - [@types/react-redux](https://npm.io/package/@types/react-redux.md) ^4.4.40 - [@types/redux-thunk](https://npm.io/package/@types/redux-thunk.md) ^2.1.0 - [react-router-redux](https://npm.io/package/react-router-redux.md) ^4.0.8 - [react-scrollbar-js](https://npm.io/package/react-scrollbar-js.md) ^1.0.1 - [@types/query-string](https://npm.io/package/@types/query-string.md) ^4.3.1 - [@types/react-router](https://npm.io/package/@types/react-router.md) 3 - [@types/redux-logger](https://npm.io/package/@types/redux-logger.md) ^3.0.0 - [storm-react-diagrams](https://npm.io/package/storm-react-diagrams.md) ^2.4.9 - [@types/redux-devtools](https://npm.io/package/@types/redux-devtools.md) ^3.0.37 - [react-tap-event-plugin](https://npm.io/package/react-tap-event-plugin.md) ^2.0.1 - [react-transition-group](https://npm.io/package/react-transition-group.md) ^1.1.3 - [@types/react-router-redux](https://npm.io/package/@types/react-router-redux.md) 4.0.44 - [circular-dependency-plugin](https://npm.io/package/circular-dependency-plugin.md) ^3.0.0 - [@types/react-tap-event-plugin](https://npm.io/package/@types/react-tap-event-plugin.md) ^0.0.30 - [@types/react-transition-group](https://npm.io/package/@types/react-transition-group.md) ^1.1.0 ## Recent versions - 0.1.2 (latest) — 2017-06-24 - 0.1.1 — 2017-06-24 - 0.1.0 — 2017-06-24 ## README React Pintu (Alpha) ========= A flow-based React application framework for everyone. ## Installation `npm install --save react-pintu` or `yarn add react-pintu` ## Usecase (written in Typescript) 1. Write application views React components. Package the components as Pintu containers. ```Typescript import * as React from 'react'; import {UIContainer, IActionCallback, IContainerSpec, Types} from 'react-pintu'; interface IInputs { sampleInput: string; } interface IProps { inputs: IInputs; actions: IActionCallback; //... other props } class ViewComponent extends React.Component { render() { // ... render React component } } export class View extends UIContainer { getContainerSpec(): IContainerSpec { return { name: 'SampleView', pathTemplate: '/sample(:/prevButton)', inputs: { sampleInput: Types.string.isRequired, }, actions: { sampleAction: { id: 'sampleAction', label: 'Sample Action', type: 'endOfStep', payload: { buttonClicked: Types.string.isRequired, }, }, }, } } render(inputs: IInputs, onAction: IActionCallback) { return ( ); } } ``` 2. Pintu containers are also used for packaging business logic. ```Typescript import {LogicContainer, IContainerSpec, IActionCallback, Types} from 'react-pintu'; export class BranchLogic extends LogicContainer { getContainerSpec(): IContainerSpec { return { name: 'Branch', pathTemplate: '/branch', inputs: { flag: Types.bool, }, actions: { true: { id: 'true', label: 'True', type: 'endOfStep', payload: {}, }, false: { id: 'false', label: 'False', type: 'endOfStep', payload: {}, }, }, }; } async run(inputs: any, onAction: IActionCallback): Promise { if (inputs.flat) { onAction('true', {}); } else { onAction('false', {}); } } } ``` 3. Connect application views and business logic using flow builder and run them. ![workflow demo](https://raw.githubusercontent.com/hanlindev/Pintu/master/images/sample/demo.gif) ## Usage Please refer to the `sample` directory for the sample usage.\ ## Roadmap to beta 1. Support container composition. 2. Layout editor and code generator 3. Fix common bugs and errors. 4. Make sample page stable and create a Github IO page. 5. Productionalize. ## Roadmap to release 1. Add container and flow versioning support. 2. Add package script or create a binary to help with version management. 3. Release ready. --- _Source: https://npm.io/package/react-pintu · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._