{"id":26494701,"url":"https://github.com/marlo22/react-simplifier-babel","last_synced_at":"2026-05-05T13:37:09.431Z","repository":{"id":63077266,"uuid":"565073401","full_name":"marlo22/react-simplifier-babel","owner":"marlo22","description":"A Babel plugin that makes writing React components concise and fast.","archived":false,"fork":false,"pushed_at":"2022-11-12T10:53:46.000Z","size":117,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-29T22:16:26.786Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/marlo22.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":"2022-11-12T08:56:32.000Z","updated_at":"2022-11-12T10:54:49.000Z","dependencies_parsed_at":"2022-11-12T11:45:57.365Z","dependency_job_id":null,"html_url":"https://github.com/marlo22/react-simplifier-babel","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/marlo22/react-simplifier-babel","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marlo22%2Freact-simplifier-babel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marlo22%2Freact-simplifier-babel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marlo22%2Freact-simplifier-babel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marlo22%2Freact-simplifier-babel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marlo22","download_url":"https://codeload.github.com/marlo22/react-simplifier-babel/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marlo22%2Freact-simplifier-babel/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262780954,"owners_count":23363074,"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":[],"created_at":"2025-03-20T10:24:24.284Z","updated_at":"2026-05-05T13:37:09.379Z","avatar_url":"https://github.com/marlo22.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @react-simplifier/babel-plugin\nA Babel plugin that makes writing React components concise and fast.\n\n:warning: **WARNING: This project is still in early develop stage! DO NOT use it on production!** :warning:\n\n## How it works?\nLet's have a look on an example. This is a simple React component:\n```jsx\nconst Counter = () =\u003e {\n  const [counter, setCounter] = useState(0);\n\n  const increment = () =\u003e {\n    setCounter((prevValue) =\u003e prevValue + 1);\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003cspan\u003e{counter}\u003c/span\u003e\n      \u003cbutton onClick={increment}\u003eIncrement\u003c/button\u003e\n    \u003c/div\u003e\n  )\n};\n```\nAnd here, the same component but with React Simplifier:\n```jsx\nconst Counter = () =\u003e {\n  const $counter = 0;\n\n  const increment = () =\u003e { counter++; }\n\n  return (\n    \u003cdiv\u003e\n      \u003cspan\u003e{counter}\u003c/span\u003e\n      \u003cbutton onClick={increment}\u003eIncrement\u003c/button\u003e\n    \u003c/div\u003e\n  )\n};\n```\nAs you can see, working with this plugin is much easier, because you don't have to import `useState` and use the `useState` getter/setter. You can deal with the component's state as with normal JS variables. Under the hood the React `useState` hook is still used so the compiled code will look like this:\n```jsx\nimport { useState } from 'react';\n\nconst Counter = () =\u003e {\n  const [$counter, ____set$counter] = useState(0);\n\n  const increment = () =\u003e ____set$counter((prevValue) =\u003e prevValue + 1);\n\n  return (\n    \u003cdiv\u003e\n      \u003cspan\u003e{counter}\u003c/span\u003e\n      \u003cbutton onClick={increment}\u003eIncrement\u003c/button\u003e\n    \u003c/div\u003e\n  )\n};\n\n```\nBut you don't need to care, because the plugin does it for you. :wink:\n\n## Installation\nThe plugin is available as an npm package.\n```\nnpm i @react-simplifier/babel-plugin\n```\nAfter installation you have to add the plugin to your Babel config file.\n\n```js\nmodule.exports = {\n  ...\n  plugins: [\n    '@react-simplifier/babel-plugin'\n  ]\n}\n```\n\n## Configuration\n| Property | Required | Type | Default value | Description |\n| -------- | -------- | ---- | ------------- | ----------- |\n| `stateVariablePattern` | :x: | `RegExp` | `/^\\$\\w+/` | Set pattern to recognize React state variables. The default pattern starts with the dollar sign - `$foo` |\n\n## FAQ\n### Does the plugin work with class components?\nNot yet, we plan to add support for class components in the future - this is one of our priorities.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarlo22%2Freact-simplifier-babel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarlo22%2Freact-simplifier-babel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarlo22%2Freact-simplifier-babel/lists"}