{"id":17342697,"url":"https://github.com/wkornewald/ts-react-struct","last_synced_at":"2026-05-06T20:35:50.656Z","repository":{"id":57381105,"uuid":"95327393","full_name":"wkornewald/ts-react-struct","owner":"wkornewald","description":"TypeScript package for using React and immutable.js with type-safe cursors and a central event system (as a Redux alternative)","archived":false,"fork":false,"pushed_at":"2017-07-27T12:31:37.000Z","size":34,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-03-20T00:28:36.351Z","etag":null,"topics":["cursor","cursors","events","immutable","immutablejs","react","redux","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wkornewald.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-24T23:09:33.000Z","updated_at":"2020-09-04T04:07:57.000Z","dependencies_parsed_at":"2022-09-26T16:50:27.717Z","dependency_job_id":null,"html_url":"https://github.com/wkornewald/ts-react-struct","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/wkornewald/ts-react-struct","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wkornewald%2Fts-react-struct","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wkornewald%2Fts-react-struct/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wkornewald%2Fts-react-struct/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wkornewald%2Fts-react-struct/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wkornewald","download_url":"https://codeload.github.com/wkornewald/ts-react-struct/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wkornewald%2Fts-react-struct/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32711492,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-06T19:35:05.142Z","status":"ssl_error","status_checked_at":"2026-05-06T19:35:03.996Z","response_time":117,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cursor","cursors","events","immutable","immutablejs","react","redux","typescript"],"created_at":"2024-10-15T16:06:40.796Z","updated_at":"2026-05-06T20:35:50.639Z","avatar_url":"https://github.com/wkornewald.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ts-react-struct\n\n[![npm version](https://badge.fury.io/js/ts-react-struct.svg)](https://badge.fury.io/js/ts-react-struct)\n[![NPM downloads](https://img.shields.io/npm/dm/ts-react-struct.svg?style=flat)](https://npmjs.org/package/ts-react-struct)\n[![Build Status](https://travis-ci.org/wkornewald/ts-react-struct.svg?branch=master)](https://travis-ci.org/wkornewald/ts-react-struct)\n\n`ts-react-struct` is a TypeScript package for using `React` and `immutable.js` with type-safe cursors and a central event system.\nThe emphasis here is on type-safety.\n\nYou'll usually want to combine this with [ts-immutable-struct](https://github.com/wkornewald/ts-immutable-struct).\n\n## Getting started\n\nInstall the package:\n```sh\nnpm install --save ts-immutable-struct ts-react-struct\n```\n\nExample usage:\n```typescript\nimport * as React from 'react'\nimport {ChangeEvent} from 'react'\nimport * as ReactDom from 'react-dom'\nimport {Struct, LeafRef} from 'ts-immutable-struct'\nimport {Component} from 'ts-react-struct'\n\ninterface Props extends React.HTMLProps\u003cHTMLInputElement\u003e {\n  valueRef: LeafRef\u003cstring\u003e,\n}\n\nclass Input extends Component\u003cProps\u003e {\n  onChange = (event: ChangeEvent\u003cHTMLInputElement\u003e) =\u003e {\n    this.props.valueRef.val(event.target.value,event)\n  }\n\n  render() {\n    let props: Props = Object.assign({}, this.props)\n    delete props.valueRef\n    return \u003cinput {...props} value={this.props.valueRef.deref()} onChange={this.onChange} /\u003e\n  }\n}\n\nlet data = Struct({\n  value: 'ahoy',\n})\n\nfunction render() {\n  return ReactDom.render(\u003cInput valueRef={data.get('value')} /\u003e, document.getElementById('content'))\n}\nrender()\n\ndata.observe((event, oldVal, newVal) =\u003e {\n  render()\n})\n```\n\nNow, the state is always in sync with the DOM:\n```typescript\ndata.get('value').deref()\n// =\u003e \"ahoy\"\n\ndata.get('value').val('hola')\n// =\u003e Input gets rerendered as \u003cinput value=\"hola\" /\u003e\n\n// \u003c= user types \"hey\" into input field\ndata.get('value').deref() // =\u003e \"hey\"\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwkornewald%2Fts-react-struct","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwkornewald%2Fts-react-struct","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwkornewald%2Fts-react-struct/lists"}