{"id":16673562,"url":"https://github.com/sasa-b/react-bridge","last_synced_at":"2026-03-09T17:14:04.435Z","repository":{"id":62540393,"uuid":"157450001","full_name":"sasa-b/react-bridge","owner":"sasa-b","description":"A small library that helps you make hybrid apps by integrating React.js into full stack PHP frameworks.  Inspired by react-rails gem.","archived":false,"fork":false,"pushed_at":"2018-12-02T14:41:18.000Z","size":13,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-10-03T13:47:28.661Z","etag":null,"topics":["laravel","library","mvc","php","react","react-rails","reactjs"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sasa-b.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-11-13T21:33:45.000Z","updated_at":"2024-03-19T10:31:34.000Z","dependencies_parsed_at":"2022-11-02T15:33:55.109Z","dependency_job_id":null,"html_url":"https://github.com/sasa-b/react-bridge","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/sasa-b/react-bridge","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sasa-b%2Freact-bridge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sasa-b%2Freact-bridge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sasa-b%2Freact-bridge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sasa-b%2Freact-bridge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sasa-b","download_url":"https://codeload.github.com/sasa-b/react-bridge/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sasa-b%2Freact-bridge/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30304040,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-09T14:33:48.460Z","status":"ssl_error","status_checked_at":"2026-03-09T14:33:48.027Z","response_time":61,"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":["laravel","library","mvc","php","react","react-rails","reactjs"],"created_at":"2024-10-12T12:27:14.111Z","updated_at":"2026-03-09T17:14:04.390Z","avatar_url":"https://github.com/sasa-b.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"## React Bridge\n\nA small library that helps you make hybrid apps by integrating React.js into full stack PHP frameworks.\n\nInspired by __react-rails__ gem\n\n### Getting started\n\nAll you need to do to integrate React into your favorite full stack MVC project is:\n\n1. `npm install react` or `yarn add react`\n\n2. `composer require sasab/react-bridge`\n\n3. Call the `react_component` or `rc` function somewhere in your views\n\n4. Finally, add the generated file(s) to your bundle or directly into your html via the script tag\n\nIf you are a __Laravel__ user you can start using it out of the box, it uses Laravel's folder structure by default.\n\nThe \"bundling\" `react.js` file will be generated in `/resources/assets/js` and it will look for your React component files \nin the `/resources/assets/js/components` folder by default.\n\nThis function will detect the environment of your app from the `.env` file, if it is in _production_ it will just\nreturn the `\u003cdiv id='my-component' data-props='{\"foo\":\"bar\"}'\u003e` file required by React. If it is in development it will write/append to the `react.js` file.\n\nYou can override the defaults by either using the `.env` file or providing the overrides as the third param to the `react_component` function. \n\n```php\n\n    // Data provided from the server that will be passed as props to your component\n    $props = ['foo' =\u003e 'bar'];\n\n    // Default options\n    \u003c?= react_component('my-component', $props, [\n        'ref' =\u003e false,\n        'component' =\u003e null,\n        'path' =\u003e '/resources/assets/js',\n        'folder' =\u003e 'components',\n        'filename' =\u003e 'react'    \n    ]) ?\u003e\n    \n    // or in Laravel's blade\n\n    {!! react_component('my-laravel-component', ['foo' =\u003e 'bar']) !!}\n```\n\n.env:\n```\nREACT_BRIDGE_ENV=\nREACT_BRIDGE_PATH=\nREACT_BRIDGE_FOLDER=\nREACT_BRIDGE_FILENAME=\n```\n\n\n### Options\n\n1. __ref__ - if you set it to `true` your component will have have a reference on the global\nwindow object `window._components.MyComponent`\n2. __component__ - by default the first parameter to the `react_component` function represents the html `id` attribute which will be turned into the `StudlyCase` name of your component, \nand the function will look into the root of the `../components/` folder for your actual _React.jsx_ component file. \n\n    If you want to provide a custom name or a custom path or both you can provide it as this parameter \ne.g.: \n    ```php\n    react_component('my-component', $data, ['component' =\u003e 'Articles/Comments/SingleComment']);\n    ``` \n\n    Dot-notation is also supported so you can write it like this as well: \n    ```php\n    react_component('my-component', $data, ['component' =\u003e 'Articles.Comments.SingleComment']);\n    ```\n    \n    From `v1.1` first parameter can be an array, so you can provide the `id` and the custom `component` as a list: : \n    ```php\n        react_component(['my-component', 'Articles.Comments.SingleComment'], $data);\n    ```\n3. __path__ - base path where your bundling file(s) will be generated\n\n4. __folder__ - folder name inside the __path__ where your React.jsx components will be located\n\n5. __filename__ - name of your bundling file(s)    \n\n### Conventions\n\nThe first parameter to the `react_component` expects a _slug_ that will be the _id_ of the element which, as previously noted,\nwill be turned into the `StudlyCase` name of the component, e.g.:\n\n`react_component('my-component');`\n\nIf the name of the component is actually a folder the function will look for a container component inside of the folder\n`/MyComponent/MyComponentContainer`. You can read more about this React pattern [here](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsasa-b%2Freact-bridge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsasa-b%2Freact-bridge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsasa-b%2Freact-bridge/lists"}