{"id":22064361,"url":"https://github.com/tyler-technologies-oss/forge-react","last_synced_at":"2026-04-02T23:52:05.313Z","repository":{"id":57700513,"uuid":"480531524","full_name":"tyler-technologies-oss/forge-react","owner":"tyler-technologies-oss","description":"An adapter library for using Forge components in an React application.","archived":false,"fork":false,"pushed_at":"2025-01-30T19:25:38.000Z","size":3511,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-05-13T00:46:43.376Z","etag":null,"topics":["forge","react"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tyler-technologies-oss.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":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-04-11T19:57:09.000Z","updated_at":"2025-01-30T19:25:41.000Z","dependencies_parsed_at":"2024-05-16T13:27:31.219Z","dependency_job_id":"e0920f6e-a075-4773-9a8f-5647b23513fb","html_url":"https://github.com/tyler-technologies-oss/forge-react","commit_stats":{"total_commits":21,"total_committers":3,"mean_commits":7.0,"dds":0.2857142857142857,"last_synced_commit":"8d075003e76cee10a36604ef6586259361a4df74"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tyler-technologies-oss%2Fforge-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tyler-technologies-oss%2Fforge-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tyler-technologies-oss%2Fforge-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tyler-technologies-oss%2Fforge-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tyler-technologies-oss","download_url":"https://codeload.github.com/tyler-technologies-oss/forge-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253850874,"owners_count":21973671,"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":["forge","react"],"created_at":"2024-11-30T19:09:02.297Z","updated_at":"2026-04-02T23:52:05.274Z","avatar_url":"https://github.com/tyler-technologies-oss.png","language":"TypeScript","readme":"# Tyler Forge™ React Adapter\n\nThis repository contains the `@tylertech/forge-react` adapter library for working with\nTyler Forge™ components within a React application. This library contains React wrapper components,\nhooks, and other utilities to improve the developer experience when building applications with Forge.\n\n\u003e Note: The `@tylertech/forge-react` package is not required when using Forge with React\n\u003e projects, but it will make the consumption of Forge seamless and feel more native to React developers.\n\n## The problem\n\nReact doesn't pass data through the JavaScript API (properties) on HTML elements. This means that any Web\nComponents created with the Custom Elements API in the browser will suffer from the same issue when trying\nto pass complex data types such as array, objects, and functions through to the underlying HTML element.\n\nAnother issue is how event bubbling works in React. Since React uses its own synthetic events system,\nstandard HTML event bubbling from custom elements doesn't work, nor does attaching event listeners to\nthese custom elements for any `CustomEvent` types.\n\nThis library provides proxy React component wrappers for all Forge components to ensure that the APIs\nare properly consumed via the JavaScript API (HTML attributes are still usable as well), along with \nproviding the ability to listen to custom events on the elements.\n\n\u003e **Note:** React now natively supports communication with custom elements as of React 19. You will now be able\n\u003e to use the standard Forge elements directly (without the React wrappers) in React 19+ going forward!\n\n## Data binding\n\nReact by default will set values on custom elements through HTML attributes, so code like this will not\nwork as expected because `data` will get stringified:\n\n```html\n\u003cforge-table data={data}\u003e\u003c/forge-table\u003e\n```\n\nBy using this library, you will use the React wrapper components instead to ensure this works as expected:\n\n```html\n\u003cForgeTable data={data} /\u003e\n```\n\n## Event binding\n\nWhen working with events, you will use a specific convention to attach callbacks:\n\n```html\n\u003cForgeTable on-forge-table-sort={onSort} /\u003e\n```\n\n\u003e Prefix the standard Forge event names with `on-*` syntax to add event listener callbacks just\n\u003e as you normally would in React.\n\n## Hooks\n\nThe library provides React hooks for working with dynamic elements such as dialog, toast, bottom sheet... etc.\n\n\u003e If you are using class components instead, there are also wrapper components for each that consume the hooks to expose\n\u003e them with a declarative API to use as a component.\n\nFor example you can show a dialog using a hook like this:\n\n```ts\nimport { useForgeDialog } from '@tylertech/forge-react';\n\nconst DialogComponent = () =\u003e \u003cdiv\u003eDialog component\u003c/div\u003e;\n\nconst SomeComponent = () =\u003e {\n  // You provide a component to display in a `\u003cforge-dialog\u003e` as the first parameter, and\n  // any (optional) configuration as the second parameter\n  const [showDialog, hideDialog] = useForgeDialog(DialogComponent, { persistent: true });\n\n  function handleClick(): void {\n    showDialog();\n  }\n\n  return (\n    \u003cForgeButton\u003e\n      \u003cbutton type=\"button\" onClick={handleClick}\u003eShow dialog\u003c/button\u003e\n    \u003c/ForgeButton\u003e\n  );\n};\n```\n\nAlternatively, if you're using components, you can show a dialog like this:\n\n```ts\nimport { ForgeDialog } from '@tylertech/forge';\n\nconst SomeComponent = () =\u003e {\n  const [isOpen, setOpen] = useState(false);\n\n  function handleClick(): void {\n    setOpen(true);\n  }\n\n  return (\n    \u003cForgeDialog open={isOpen} persistent on-forge-dialog-close={() =\u003e setOpen(false)}\u003e\n      \u003cDialogComponent /\u003e\n    \u003c/ForgeDialog\u003e\n  );\n};\n```\n\n## Using Forge\n\nThis library provides React wrapper components for Forge, but it does **not** automatically register the corresponding Forge components with the browser. To do so, you will need to import the Forge component definition function(s) in your React app separately.\n\nYou typically want to define the components as early as possible in the bootstrapping process of your application. The `index.tsx` is a great place to do so:\n\n```ts\nimport { defineComponents } from '@tylertech/forge';\n\ndefineComponents();\n```\n\n\u003e Important: this will define **all** components in Forge, causing all of the code to be loaded into your app, even if you aren't using certain components.\n\nTo only load specific components, you can import the individual definition functions as needed:\n\n```ts\nimport { defineAppBarComponent, defineButtonComponent } from '@tylertech/forge';\n\ndefineAppBarComponent();\ndefineButtonComponent();\n```\n\n\u003e Note: depending on the structure of your application, it can be beneficial to register certain Forge components that are only used in a specific part of your\n\u003e app so that it is bundled only with the code that is using it. This is referred to as code splitting and can improve the performance of your app, especially\n\u003e when using lazy loading.\n\n## Development\n\nThe demo application can be started by running `npm start`.\n\nTo build the library, run the following: `npm run build`.\n\n\u003e The built npm package output will be placed in the `dist/forge-react` directory.\n\n## TypeScript\n\nThis library provides typings for all React wrappers and hooks for compatibility with TypeScript.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftyler-technologies-oss%2Fforge-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftyler-technologies-oss%2Fforge-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftyler-technologies-oss%2Fforge-react/lists"}