├── .npmrc ├── .gitignore ├── .travis.yml ├── .huskyrc ├── .lintstagedrc ├── .prettierrc ├── index.d.ts ├── .babelrc.js ├── src └── index.js ├── README.md └── package.json /.npmrc: -------------------------------------------------------------------------------- 1 | package-lock=false 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | 3 | node_js: 4 | - "node" 5 | -------------------------------------------------------------------------------- /.huskyrc: -------------------------------------------------------------------------------- 1 | { 2 | "hooks": { 3 | "pre-commit": "lint-staged" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /.lintstagedrc: -------------------------------------------------------------------------------- 1 | { 2 | "*.{js,ts,md}": [ 3 | "prettier --write" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true, 4 | "trailingComma": "all" 5 | } 6 | -------------------------------------------------------------------------------- /index.d.ts: -------------------------------------------------------------------------------- 1 | import { Source } from 'callbag' 2 | 3 | export default function useCallbag( 4 | initialState: T, 5 | factory: (initialState: T) => Source, 6 | ): T 7 | -------------------------------------------------------------------------------- /.babelrc.js: -------------------------------------------------------------------------------- 1 | const { BABEL_ENV, NODE_ENV } = process.env 2 | const modules = BABEL_ENV === 'cjs' || NODE_ENV === 'test' ? 'commonjs' : false 3 | const loose = true 4 | 5 | module.exports = { 6 | presets: [ 7 | [ 8 | '@babel/env', 9 | { 10 | loose, 11 | modules, 12 | }, 13 | ], 14 | ], 15 | } 16 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import subscribe from 'callbag-subscribe' 2 | import { useEffect, useState } from 'react' 3 | 4 | const ONCE = [] 5 | 6 | export default function useCallbag(initialState, factory) { 7 | const [state, setState] = useState(initialState) 8 | useEffect(() => subscribe(setState)(factory(initialState)), ONCE) 9 | return state 10 | } 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # use-callbag 2 | 3 | Use callbag as React hook. 4 | 5 | ## Example 6 | 7 | ```jsx 8 | import interval from 'callbag-interval' 9 | import map from 'callbag-map' 10 | import pipe from 'callbag-pipe' 11 | import useCallbag from 'use-callbag' 12 | 13 | export default function Counter({ initialCount }) { 14 | const count = useCallbag(initialCount, () => 15 | pipe( 16 | interval(1000), 17 | map(i => initialCount + i + 1), 18 | ), 19 | ) 20 | return {`Counter: ${count}`} 21 | } 22 | ``` 23 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "use-callbag", 3 | "version": "1.0.0", 4 | "description": "👜 Use callbag as React hook.", 5 | "main": "dist/use-callbag.cjs.js", 6 | "module": "dist/use-callbag.esm.js", 7 | "types": "./index.d.ts", 8 | "files": [ 9 | "dist", 10 | "*.d.ts" 11 | ], 12 | "scripts": { 13 | "pretest": "preconstruct dev", 14 | "test": "echo \"Warning: no test specified\" || jest --env=node", 15 | "build": "preconstruct build", 16 | "preversion": "npm test", 17 | "prepare": "npm run build" 18 | }, 19 | "repository": { 20 | "type": "git", 21 | "url": "git+https://github.com/Andarist/use-callbag.git" 22 | }, 23 | "author": "Mateusz Burzyński (https://github.com/Andarist)", 24 | "license": "MIT", 25 | "bugs": { 26 | "url": "https://github.com/Andarist/use-callbag/issues" 27 | }, 28 | "homepage": "https://github.com/Andarist/use-callbag#readme", 29 | "peerDependencies": { 30 | "react": "^16.8.0 || ^17.0.0" 31 | }, 32 | "devDependencies": { 33 | "@babel/core": "^7.12.10", 34 | "@babel/plugin-transform-modules-commonjs": "^7.12.1", 35 | "@babel/preset-env": "^7.12.11", 36 | "@preconstruct/cli": "^2.0.1", 37 | "husky": "^4.3.8", 38 | "jest": "^26.6.3", 39 | "lint-staged": "^10.5.3", 40 | "prettier": "^2.2.1", 41 | "react": "^17.0.1" 42 | }, 43 | "dependencies": { 44 | "callbag": "^1.4.0", 45 | "callbag-subscribe": "^1.5.1" 46 | } 47 | } 48 | --------------------------------------------------------------------------------