{"_id":"@bitalikrty/events","name":"@bitalikrty/events","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@bitalikrty/events","version":"1.0.0","description":"Events listener for React apps","author":{"name":"bitalikrty bitalikrty@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/bitalikr1999/events.git"},"main":"dist/events.umd.js","module":"dist/events.es5.js","typings":"dist/types/events.d.ts","engines":{"node":">=6.0.0"},"scripts":{"lint":"tslint  --project tsconfig.json -t codeFrame 'src/**/*.ts' 'test/**/*.ts'","prebuild":"rimraf dist","build":"tsc --module commonjs && rollup -c rollup.config.ts","start":"rollup -c rollup.config.ts -w","test":"jest --coverage","test:watch":"jest --coverage --watch","test:prod":"npm run lint && npm run test -- --no-cache","deploy-docs":"ts-node tools/gh-pages-publish","report-coverage":"cat ./coverage/lcov.info | coveralls","commit":"git-cz","semantic-release":"semantic-release","semantic-release-prepare":"ts-node tools/semantic-release-prepare","precommit":"lint-staged","travis-deploy-once":"travis-deploy-once"},"lint-staged":{"{src,test}/**/*.ts":["prettier --write","git add"]},"jest":{"transform":{".(ts|tsx)":"ts-jest"},"testEnvironment":"node","testRegex":"(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$","moduleFileExtensions":["ts","tsx","js"],"coveragePathIgnorePatterns":["/node_modules/","/test/"],"collectCoverageFrom":["src/*.{js,ts}"]},"prettier":{"semi":false,"singleQuote":true},"commitlint":{"extends":["@commitlint/config-conventional"]},"devDependencies":{"@commitlint/cli":"^7.1.2","@commitlint/config-conventional":"^7.1.2","@types/jest":"^23.3.2","@types/node":"^10.11.0","colors":"^1.3.2","commitizen":"^3.0.0","coveralls":"^3.0.2","cross-env":"^5.2.0","cz-conventional-changelog":"^2.1.0","husky":"^1.0.1","jest":"^23.6.0","jest-config":"^23.6.0","lint-staged":"^8.0.0","lodash.camelcase":"^4.3.0","prettier":"^1.14.3","prompt":"^1.0.0","replace-in-file":"^3.4.2","rimraf":"^2.6.2","rollup":"^0.67.0","rollup-plugin-commonjs":"^9.1.8","rollup-plugin-json":"^3.1.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-sourcemaps":"^0.4.2","rollup-plugin-typescript2":"^0.18.0","semantic-release":"^15.9.16","shelljs":"^0.8.3","travis-deploy-once":"^5.0.9","ts-jest":"^23.10.2","ts-node":"^7.0.1","tslint":"^5.11.0","tslint-config-prettier":"^1.15.0","tslint-config-standard":"^8.0.1","typescript":"^3.0.3"},"bugs":{"url":"https://github.com/bitalikr1999/events/issues"},"homepage":"https://github.com/bitalikr1999/events#readme","_id":"@bitalikrty/events@1.0.0","_nodeVersion":"18.17.1","_npmVersion":"9.6.7","dist":{"integrity":"sha512-2D24kw92wcPt1tezSGVmJVPgpB08dykGkDjuIdAR/oMh3H15lzNME97g5tkfbQxWFUd0YlUoxcS/qFrxQVQ7WA==","shasum":"af15392e6c12c1e86dc50b6f2fe2d4f2e8fb8811","tarball":"https://registry.npmjs.org/@bitalikrty/events/-/events-1.0.0.tgz","fileCount":13,"unpackedSize":13952,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxkpoKxo3YnAkkmkQLEdJa924WHBQyG2WVIIYgt4BEQgIhAOmXCRDeShjd1rbzrIdE15TGsyJDajge+9S1bcnXIrUq"}]},"_npmUser":{"name":"bitalikrty","email":"bitalikrty@gmail.com"},"directories":{},"maintainers":[{"name":"bitalikrty","email":"bitalikrty@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/events_1.0.0_1697562227414_0.21107402223387473"},"_hasShrinkwrap":false}},"time":{"created":"2023-10-17T17:03:47.309Z","1.0.0":"2023-10-17T17:03:47.664Z","modified":"2023-10-17T17:03:47.953Z"},"maintainers":[{"name":"bitalikrty","email":"bitalikrty@gmail.com"}],"description":"Events listener for React apps","homepage":"https://github.com/bitalikr1999/events#readme","repository":{"type":"git","url":"git+https://github.com/bitalikr1999/events.git"},"author":{"name":"bitalikrty bitalikrty@gmail.com"},"bugs":{"url":"https://github.com/bitalikr1999/events/issues"},"license":"MIT","readme":"# @bitalikrty/events\n\n> Events listener for React apps\n\n[![NPM](https://img.shields.io/npm/v/@bitalikrty/events.svg)](https://www.npmjs.com/package/@bitalikrty/events) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n## Install\n\n```bash\nnpm install --save @bitalikrty/events\n```\n\n## Usage\n\n### 1. Create interface for events \nCreate inteface where write all events and data for each events.\n```\n// src/shared/events/inteface.ts\ninterface AppEvents {\n    // EVENT NAME\n    userCreated: \n    // EVENT PAYLOAD\n    {\n        user: IUser \n    }\n    \n    userLogout: {}\n    // ...etc\n}\n\n```\n\n### 2. Create Events instance \n```\n// src/shared/events/index.ts\nimport { Events } from '@bitalikrty/events'\nimport { AppEvents } from './inteface.ts'\n\nexport const appEvents = new Events<AppEvents>()\n\n```\n\n### 3. Subscribe and send event \n\nSubscribe \n```\nappEvents.on('userCreated', payload => {\n    // some action\n})\n```\n\nSend event \n```\nappEvents.emit('userCreated', { user })\n```\n\n### 4. (Optional) Create listener hook \n\nIf your want listen some event in react component you should create custom hook ( for better ts support should be create youself ).\nHook \n```\n// src/shared/hooks\nimport {useEffect} from 'react'\nimport {AppEvents, appEvents} from '../events'\n\nexport const useEventsListener = <T extends keyof AppEvents>(\n    name: T,\n    action: (data: AppEvents[T]) => void,\n    dependencies: any[] = [],\n) => {\n    useEffect(() => {\n        const fn = (data: AppEvents[T]) => {\n            try {\n                action(data)\n            } catch (e) {\n                console.log('error event', e)\n            }\n        }\n        appEvents.on(name, fn)\n\n        return () => appEvents.off(name, fn)\n    }, dependencies)\n}\n\n```\n\nAnd then use this hook in components \n```\nconst Components = () => {\n    useEventsListener('userCreated', (payload) => {\n        \n    }, [//depends])\n}\n```\nSo you can send some event from any place of code, for example from store or from some service and catch it in component.\nCan be use when you want send event between components which are far down the component tree \n## License\n\nMIT © [](https://github.com/)\n","readmeFilename":"README.md"}