{"id":16252257,"url":"https://github.com/remarkablemark/reon","last_synced_at":"2025-03-19T20:31:14.915Z","repository":{"id":57353594,"uuid":"67253083","full_name":"remarkablemark/REON","owner":"remarkablemark","description":":cyclone: JSON for React.","archived":false,"fork":false,"pushed_at":"2017-08-27T03:00:48.000Z","size":21,"stargazers_count":10,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-17T10:51:42.360Z","etag":null,"topics":["json","react","reon"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/reon-core","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/remarkablemark.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2016-09-02T20:33:59.000Z","updated_at":"2019-06-26T22:51:05.000Z","dependencies_parsed_at":"2022-09-15T01:22:37.457Z","dependency_job_id":null,"html_url":"https://github.com/remarkablemark/REON","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remarkablemark%2FREON","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remarkablemark%2FREON/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remarkablemark%2FREON/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remarkablemark%2FREON/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/remarkablemark","download_url":"https://codeload.github.com/remarkablemark/REON/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244501300,"owners_count":20462837,"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":["json","react","reon"],"created_at":"2024-10-10T15:12:58.431Z","updated_at":"2025-03-19T20:31:14.185Z","avatar_url":"https://github.com/remarkablemark.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# REON [![NPM version](https://img.shields.io/npm/v/reon-core.svg)](https://www.npmjs.com/package/reon-core) [![Build Status](https://travis-ci.org/remarkablemark/REON.svg?branch=master)](https://travis-ci.org/remarkablemark/REON) [![Coverage Status](https://coveralls.io/repos/github/remarkablemark/REON/badge.svg)](https://coveralls.io/github/remarkablemark/REON)\n\n[![NPM](https://nodei.co/npm/reon-core.png)](https://nodei.co/npm/reon-core/)\n\n**REON** (React Element Object Notation) is a data-interchange format inspired by [React elements](https://facebook.github.io/react/docs/rendering-elements.html) and [JSON](http://www.json.org).\n\n## Installation\n\n```sh\n# npm\nnpm install reon-core\n\n# yarn\nyarn add reon-core\n```\n\n## Usage\n\nFirst import the module:\n```js\n// ES5\nvar REON = require('reon-core');\n\n// ES6\nimport REON from 'reon-core';\n```\n\n### REON.stringify()\n\nThe `REON.stringify()` method converts a [ReactElement](https://facebook.github.io/react/docs/rendering-elements.html) to a JSON string, optionally replacing values if a replacer function is specified.\n\n**Syntax:**\n```js\nREON.stringify(ReactElement[, replacer]);\n```\n\n**Parameters:**\n1. **ReactElement** (_required_): The [ReactElement](https://facebook.github.io/react/docs/rendering-elements.html) to convert to a JSON string.\n2. **replacer** (_optional_): A function that alters the behavior of the stringification process.\n\n#### Examples:\n\nUsing `REON.stringify()`:\n```js\nREON.stringify(\n  React.createElement('p', { className: 'classy' }, 'text')\n);\n// '{\"type\":\"p\",\"props\":{\"className\":\"classy\",\"children\":\"text\"}}'\n```\n\nUsing the `replacer` parameter:\n```js\nREON.stringify(\n  React.createElement('p', { className: 'classy' }, 'text'),\n  function(key, value) {\n    // passing in a replacer parameter will override the default replacer,\n    // which removes object keys like `ref`, `_owner`, `_store`\n    if (/^ref$|^_.+/.test(key)) return;\n\n    if (value === 'classy') {\n      return 'sophisticated'; // return replaced value\n    }\n    return value; // return everything else unchanged\n  }\n);\n// '{\"type\":\"p\",\"props\":{\"className\":\"sophisticated\",\"children\":\"text\"}}'\n```\n\n### REON.parse()\n\nThe `REON.parse()` method parses a string as [ReactElement](https://facebook.github.io/react/docs/rendering-elements.html), optionally transforming the value producted by parsing.\n\n**Syntax:**\n```js\nREON.parse(text[, reviver]);\n```\n\n**Parameters:**\n1. **text** (_required_): The string to parse as [ReactElement](https://facebook.github.io/react/docs/rendering-elements.html).\n2. **reviver** (_optional_): A function that prescribes how the value originally produced by parsing is transformed, before being returned.\n\n#### Examples:\n\nUsing `REON.parse()`:\n```js\nREON.parse(\n  '{\"type\":\"p\",\"props\":{\"className\":\"classy\",\"children\":\"text\"}}'\n);\n// React.createElement('p', { className: 'classy' }, 'text');\n```\n\nUsing the `reviver` parameter:\n```js\nREON.parse(\n  '{\"type\":\"a\",\"props\":{\"href\":\"http://foo.bar\",\"children\":\"link\"}}',\n  function(key, value) {\n    if (key === 'href' \u0026\u0026 value === 'http://foo.bar') {\n      return 'http://baz.qux'; // return different href\n    }\n    return value; // return everything else unchanged\n  }\n);\n// React.createElement('a', { href: 'http://baz.qux' }, 'link');\n```\n\n### REON.parseObject()\n\nThe `REON.parseObject()` method converts a JavaScript object into [ReactElement](https://facebook.github.io/react/docs/rendering-elements.html).\n\n**Syntax:**\n```js\nREON.parseObject(object);\n```\n\n**Parameters:**\n1. **object** (_required_): The object to convert into [ReactElement](https://facebook.github.io/react/docs/rendering-elements.html).\n\n#### Examples:\n\nUsing `REON.parseObject()`:\n```js\nREON.parseObject({\n  type: 'p',\n  props: {\n    className: 'classy',\n    children: 'text'\n  }\n});\n// React.createElement('p', { className: 'classy' }, 'text');\n```\n\n## Testing\n\n```sh\n# npm\nnpm test\nnpm run lint\n\n# yarn\nyarn test\nyarn run lint\n```\n\n## Thanks\n\nTo all the [contributors](https://github.com/remarkablemark/REON/graphs/contributors).\n\n## License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fremarkablemark%2Freon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fremarkablemark%2Freon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fremarkablemark%2Freon/lists"}