{"id":22105609,"url":"https://github.com/btmpl/react-bricks","last_synced_at":"2025-07-25T02:32:10.950Z","repository":{"id":144082941,"uuid":"141171206","full_name":"BTMPL/react-bricks","owner":"BTMPL","description":"Bundle your components as standalone widgets!","archived":false,"fork":false,"pushed_at":"2018-07-18T16:55:23.000Z","size":132,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-01T21:48:09.235Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://react-brick.surge.sh/","language":"JavaScript","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/BTMPL.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-07-16T17:29:19.000Z","updated_at":"2020-10-16T13:53:03.000Z","dependencies_parsed_at":"2023-06-26T00:23:37.831Z","dependency_job_id":null,"html_url":"https://github.com/BTMPL/react-bricks","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/BTMPL/react-bricks","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BTMPL%2Freact-bricks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BTMPL%2Freact-bricks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BTMPL%2Freact-bricks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BTMPL%2Freact-bricks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BTMPL","download_url":"https://codeload.github.com/BTMPL/react-bricks/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BTMPL%2Freact-bricks/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266944316,"owners_count":24010486,"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","status":"online","status_checked_at":"2025-07-25T02:00:09.625Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2024-12-01T06:47:39.651Z","updated_at":"2025-07-25T02:32:10.932Z","avatar_url":"https://github.com/BTMPL.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-brick\n\nBundle your components as standalone widgets!\n\n## Demo\n\nhttp://react-brick.surge.sh/\n\nIf all goes well, you should see 2 (clickable) buttons and an image that loads after 1 second.\n\n## Status\n\nThis is a proof of concept and as such is not meant for serious usage!\n\n## How to use\n\n1. Create your component like a normal React component and save it as\n\n```\nexamples/bricks/YourComponentName/index.js\n```\n\n2. Build the dll bundle\n\n```\nyarn run build:dll\n```\n\n3. Build your brick\n\n```\nset BRICK=YourComponentName \u0026\u0026 yarn run build:brick\n```\n\n\u003e Temp solution because `yarn run build:brick YourComponentName` passes the last word as another `webpack` entry point :( Might need to alter this command on UNIX platforms. I'm a Windows guy ;)\n\n4. Done!\n\nYour brick is now built in the `dist` folder. \n\nTo test it, run the folder via a http server and make sure to add the JavaScript bundle and target element to your HTML.\n\n### Developing locally\n\nWhen developing it's useful to run webpack in watch mode and serve the app. Start one terminal window with:\n\n```bash\nset BRICK=MyButton \u0026\u0026 yarn run watch\n```\n\nand server the app in another:\n\n```bash\nyarn start\n```\n\n### Why ...\n\n#### `my-button` and not `Button` or `MyButton`?\n\nUsing custom components, according to the spec:\n\n\u003e The name of a custom element must contain a dash (-). So \u0026lt;x-tags\u0026gt;, \u0026lt;my-element\u0026gt;, and \u0026lt;my-awesome-app\u0026gt; are all valid names, while \u0026lt;tabs\u0026gt; and \u0026lt;foo_bar\u0026gt; are not. This requirement is so the HTML parser can distinguish custom elements from regular elements. It also ensures forward compatibility when new tags are added to HTML.\n\n\u003e Custom elements cannot be self-closing because HTML only allows a few elements to be self-closing. Always write a closing tag (\u0026lt;app-drawer\u0026gt;\u0026lt;/app-drawer\u0026gt;).\n\n#### `on-click` not `onClick`, `class-name` not `class`?\n\nThe component attributes are passed to React component. React uses [specific names for HTML attributes](https://reactjs.org/docs/dom-elements.html).\n\n#### `data-for` on style?\n\nThe `data-for` is currently used to make sure the style is pulled into the shadow DOM and applied to the component.\n\n#### My function passed as prop does not work.\n\nRight now only `on-` attributes are evaluated as functions. Also, make sure to actually pass a function, like you would do with React components:\n\n```html\n// GOOD:\n\u003cmy-button on-click=\"(e) =\u003e alert(e.target.innerHTML)\"\u003e\n\n// BAD\n\u003cmy-button on-click=\"alert(this.innerHTML)\"\u003e\n```\n\n#### Do I have to declare `propTypes`?\n\nOnly if you want your components to react to attribute changes.\n\n#### What's the browser support?\n\nI've added a polyfill for WebComponents support in Edge. There's also a small adapter that makes the babel-transpiled classes work as components registration.\n\n#### I've tried to pass the function but it breaks my component in Internet Explorer (IE 11)\n\nThis is because IE lacks the support for arrow function. You can get around that by passing a normal function. Please note the extra set of parenthesis.\n\n```html\n// GOOD:\n\u003cmy-button on-click=\"(function (e) { alert(e.target.innerHTML); })\"\u003e\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbtmpl%2Freact-bricks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbtmpl%2Freact-bricks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbtmpl%2Freact-bricks/lists"}