{"id":17760620,"url":"https://github.com/mbasso/react-decoration","last_synced_at":"2025-04-04T06:10:12.358Z","repository":{"id":109653338,"uuid":"69398140","full_name":"mbasso/react-decoration","owner":"mbasso","description":"A collection of decorators for React Components","archived":false,"fork":false,"pushed_at":"2019-11-01T20:28:42.000Z","size":81,"stargazers_count":630,"open_issues_count":5,"forks_count":24,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-28T05:13:34.798Z","etag":null,"topics":["annotations","decorators","es7","high-order-component","react-components"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/mbasso.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-09-27T20:59:55.000Z","updated_at":"2024-09-23T10:34:36.000Z","dependencies_parsed_at":"2023-10-23T01:33:10.394Z","dependency_job_id":null,"html_url":"https://github.com/mbasso/react-decoration","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mbasso%2Freact-decoration","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mbasso%2Freact-decoration/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mbasso%2Freact-decoration/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mbasso%2Freact-decoration/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mbasso","download_url":"https://codeload.github.com/mbasso/react-decoration/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247128753,"owners_count":20888235,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["annotations","decorators","es7","high-order-component","react-components"],"created_at":"2024-10-26T19:06:41.052Z","updated_at":"2025-04-04T06:10:12.340Z","avatar_url":"https://github.com/mbasso.png","language":"JavaScript","readme":"# react-decoration\n\n[![Build\nStatus](https://travis-ci.org/mbasso/react-decoration.svg?branch=master)](https://travis-ci.org/mbasso/react-decoration)\n[![npm\nversion](https://img.shields.io/npm/v/react-decoration.svg)](https://www.npmjs.com/package/react-decoration)\n[![npm\ndownloads](https://img.shields.io/npm/dm/react-decoration.svg?maxAge=2592000)](https://www.npmjs.com/package/react-decoration)\n[![Coverage\nStatus](https://coveralls.io/repos/github/mbasso/react-decoration/badge.svg?branch=master)](https://coveralls.io/github/mbasso/react-decoration?branch=master)\n[![Join the chat at\nhttps://gitter.im/mbasso/react-decoration](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/mbasso/react-decoration?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\n\u003e A collection of @decorators for React Components\n\n- - -\n\n**Attention - In order to use react-decoration you have to use babel 5\nor use\n[this](https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy)\nplugin for babel 6. Check\n[this](https://github.com/mbasso/react-decoration/blob/master/docs/Introduction.md)\npage for information.**\n\n- - -\n\n## Installation\n\nYou can install react-decoration using [npm](https://www.npmjs.com/package/react-decoration):\n\n```bash\nnpm install --save react-decoration\n```\n\nIf you aren't using npm in your project, you can include\nreactDecoration using UMD build in the dist folder with `\u003cscript\u003e`\ntag.\n\n## Usage\n\nOnce you have installed react-decoration, supposing a CommonJS\nenvironment, you can import decorators in this way and immediately use\nthem with no configuration.\n\n```js\nimport React from 'react';\nimport { getItems } from './utils';\nimport { AutoComplete } from './components';\nimport {\n  withStyles,\n  debounce,\n  killEvent,\n  handleRenderError,\n} from 'react-decoration';\n\n@withStyles({\n  container: {\n    width: '100%',\n    height: 'auto',\n  },\n  input: {\n    width: 250,\n  },\n})\n@handleRenderError((ex) =\u003e \u003cdiv className=\"danger\"\u003e{ex.message}\u003cdiv\u003e)\nclass SampleForm extends React.Component {\n\n  state = {\n    value: 'Hello!',\n    items: [],\n  }\n\n  @debounce(500)\n  handleChange(e) {\n    getItems().then((response) =\u003e {\n      this.setState({\n        value: this.state.value,\n        items: response.data.items,\n      });\n    });\n\n    this.setState({\n      value: e.target.value,\n      items: this.state.items,\n    });\n  }\n\n  @killEvent\n  handleSubmit() {\n    // default prevented\n    // propagation stopped\n\n    alert(`AutoComplete value is: ${this.state.value}`);\n  }\n\n  render() {\n    const { styles } = this.props;\n    return (\n      \u003cdiv style={styles.container}\u003e\n        \u003cAutoComplete\n          value={this.state.value}\n          items={this.state.items}\n          onChange={this.handleChange}\n          style={styles.input}\n        /\u003e\n        \u003cbutton onClick={this.handleSubmit}\u003e\n          Submit\n        \u003c/button\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n## Documentation\n\nVisit\n[docs](https://github.com/mbasso/react-decoration/blob/master/docs)\nfolder to find the complete list of decorators and their usage.\n\n## Change Log\n\nThis project adheres to [Semantic Versioning](http://semver.org/).\nEvery upstream release, along with the migration instructions, is\ndocumented on the Github\n[Releases](https://github.com/mbasso/react-decoration/releases) page.\n\n## Authors\n\n**Matteo Basso**\n- [github/mbasso](https://github.com/mbasso)\n- [@Teo_Basso](https://twitter.com/Teo_Basso)\n\n**Ashley Lake**\n- [gitlab/lake_effect](https://gitlab.com/lake_effect)\n- [Ashley Lake](ashelake@protonmail.com)\n\n## Copyright and License\n\nCopyright (c) 2016, Matteo Basso.\n\nreact-decoration source code is licensed under the [MIT\nLicense](https://github.com/mbasso/react-decoration/blob/master/LICENSE.md).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmbasso%2Freact-decoration","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmbasso%2Freact-decoration","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmbasso%2Freact-decoration/lists"}