{"id":20602,"library":"synapse-react-client","title":"synapse-react-client","description":"React component library and client SDK for integrating with the Sage Bionetworks Synapse API. Current stable version is 4.0.9, released monthly. Provides pre-built React components (EntityFinder, SynapseTable, etc.) along with React Query hooks and a SynapseContextProvider for managing authentication and caching. Supports TypeScript, MUI theming, and SCSS customization. Differentiated by official Synapse platform integration and a comprehensive set of data access and visualization widgets for biomedical research portals.","status":"active","version":"4.0.9","language":"javascript","source_language":"en","source_url":"https://github.com/Sage-Bionetworks/synapse-web-monorepo/packages/synapse-react-client","tags":["javascript","typescript"],"install":[{"cmd":"npm install synapse-react-client","lang":"bash","label":"npm"},{"cmd":"yarn add synapse-react-client","lang":"bash","label":"yarn"},{"cmd":"pnpm add synapse-react-client","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency for certain portal integrations","package":"@sage-bionetworks/aridhia-client","optional":true},{"reason":"core UI framework peer dependency","package":"react","optional":false},{"reason":"DOM rendering peer dependency","package":"react-dom","optional":false}],"imports":[{"note":"ESM-only. Use named import. Provider must wrap all components.","wrong":"const SynapseContextProvider = require('synapse-react-client').SynapseContextProvider","symbol":"SynapseContextProvider","correct":"import { SynapseContextProvider } from 'synapse-react-client'"},{"note":"Named export, not a default export. Path imports may break tree shaking.","wrong":"import EntityFinder from 'synapse-react-client/EntityFinder'","symbol":"EntityFinder","correct":"import { EntityFinder } from 'synapse-react-client'"},{"note":"SynapseClient is a namespace object, not a default export.","wrong":"import SynapseClient from 'synapse-react-client'","symbol":"SynapseClient","correct":"import { SynapseClient } from 'synapse-react-client'"}],"quickstart":{"code":"import { SynapseContextProvider, EntityFinder } from 'synapse-react-client';\nimport { QueryClient, QueryClientProvider } from '@tanstack/react-query';\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\n\nconst queryClient = new QueryClient();\nconst myToken = process.env.SYNAPSE_ACCESS_TOKEN ?? '';\n\nfunction App() {\n  return (\n    <QueryClientProvider client={queryClient}>\n      <SynapseContextProvider\n        synapseContext={{\n          accessToken: myToken,\n          isInExperimentalMode: false,\n          utcTime: true,\n        }}\n      >\n        <EntityFinder\n          entityTypes={['org.sagebionetworks.repo.model.Project']}\n          selectMultiple={false}\n        />\n      </SynapseContextProvider>\n    </QueryClientProvider>\n  );\n}\n\nconst root = ReactDOM.createRoot(document.getElementById('root')!);\nroot.render(<App />);","lang":"typescript","description":"Shows minimal setup with QueryClientProvider, SynapseContextProvider, and EntityFinder component."},"warnings":[{"fix":"Upgrade React and React DOM to >=19.2.0. If on React 18, stay on v3.x.","message":"React 19 peer dependency required as of v4.0.0","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Convert to ES module imports. Use 'import' syntax instead of require.","message":"ESM-only since v3 - CommonJS require will fail","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Wrap your component tree with SynapseContextProvider and provide an accessToken.","message":"SynapseContextProvider must wrap all components; missing provider leads to runtime errors","severity":"gotcha","affected_versions":"*"},{"fix":"Obtain token via secure OAuth flow or environment variables (server-side). Provide as prop to SynapseContextProvider.","message":"Access token handling - do not hardcode tokens in client-side code","severity":"gotcha","affected_versions":"*"},{"fix":"Check changelog for breaking changes. For v3->v4 migration, consult upgrade guide.","message":"Some components from v2 may have been removed or renamed in v4","severity":"deprecated","affected_versions":">=4.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run 'npm install synapse-react-client' and ensure import is correct: 'import { ... } from \"synapse-react-client\"'","cause":"Package not installed or import path incorrect","error":"Module not found: Can't resolve 'synapse-react-client'"},{"fix":"Wrap component tree with <SynapseContextProvider synapseContext={{ accessToken: '...' }}>...</SynapseContextProvider>","cause":"SynapseContextProvider missing or not wrapping the component","error":"TypeError: Cannot read properties of undefined (reading 'accessToken')"},{"fix":"Wrap app with <QueryClientProvider client={queryClient}> from @tanstack/react-query","cause":"React Query provider not set up","error":"Error: Could not find react-query context"},{"fix":"Use ES module import syntax instead of require(). Set type: 'module' in package.json if needed.","cause":"Using CommonJS require in ESM environment","error":"Uncaught ReferenceError: require is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}