{"id":14384461,"url":"https://github.com/RubenVerborgh/Solid-React-Components","last_synced_at":"2025-08-23T17:32:16.879Z","repository":{"id":57161461,"uuid":"149348465","full_name":"RubenVerborgh/Solid-React-Components","owner":"RubenVerborgh","description":"Core React components for building your own Solid components and apps","archived":true,"fork":false,"pushed_at":"2020-08-28T14:53:10.000Z","size":1603,"stargazers_count":118,"open_issues_count":10,"forks_count":21,"subscribers_count":29,"default_branch":"master","last_synced_at":"2024-12-14T03:18:22.423Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://rubenverborgh.github.io/Solid-React-Components/","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/RubenVerborgh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-18T20:31:32.000Z","updated_at":"2024-05-09T16:57:05.000Z","dependencies_parsed_at":"2022-09-09T03:51:21.338Z","dependency_job_id":null,"html_url":"https://github.com/RubenVerborgh/Solid-React-Components","commit_stats":null,"previous_names":["solid/react-components"],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RubenVerborgh%2FSolid-React-Components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RubenVerborgh%2FSolid-React-Components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RubenVerborgh%2FSolid-React-Components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RubenVerborgh%2FSolid-React-Components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RubenVerborgh","download_url":"https://codeload.github.com/RubenVerborgh/Solid-React-Components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230716522,"owners_count":18269780,"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":"2024-08-28T18:01:24.441Z","updated_at":"2024-12-21T12:30:36.415Z","avatar_url":"https://github.com/RubenVerborgh.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Core React Components for Solid\nA core set of [React](https://reactjs.org/) components and hooks\nfor building your own [Solid](https://solid.inrupt.com/) components and apps.\n\n[![npm version](https://img.shields.io/npm/v/@solid/react.svg)](https://www.npmjs.com/package/@solid/react)\n[![Build Status](https://travis-ci.com/solid/react-components.svg?branch=master)](https://travis-ci.com/solid/react-components)\n[![Coverage Status](https://coveralls.io/repos/github/solid/react-components/badge.svg?branch=master)](https://coveralls.io/github/solid/react-components?branch=master)\n[![Dependency Status](https://david-dm.org/solid/react-components.svg)](https://david-dm.org/solid/react-components)\n\nFollow this [live tutorial](https://trav.page/log/write-solid/)\nto get you started!\n\n### Purpose\n✨ [Solid](https://solid.inrupt.com/) is an ecosystem for people, data, and apps\nin which people can store their data where they want,\nindependently of the apps they use.\n\n⚛️ This library aims to:\n1. provide React developers with components to develop fun Solid apps 👨🏿‍💻\n2. enable React developers to build their own components for Solid 👷🏾‍♀️\n\nSolid uses 🔗 [Linked Data](https://solid.inrupt.com/docs/intro-to-linked-data),\nso people's data from all over the Web can be connected together\ninstead of needing to be stored in one giant space.\nThis library makes working with Linked Data easier, too.\n\n### Example apps\nThese apps have already been built with React for Solid:\n- [Profile viewer](https://github.com/solid/profile-viewer-react) 👤\n- [LDflex playground](https://solid.github.io/ldflex-playground/) ⚾\n- [Demo app](https://github.com/solid/react-components/blob/master/demo/app.jsx) 🔍\n- [Another profile viewer](https://gitlab.com/angelo-v/solid-profile-viewer) 👤\n- […add yours!](https://github.com/solid/react-components/edit/master/README.md)\n\n### Install and go\nFirst add the package:\n```bash\nyarn add @solid/react # or\nnpm install @solid/react\n```\n\nThen you can import components like this:\n```JavaScript\nimport { LoginButton, Value } from '@solid/react';\n```\n\n## Build Solid apps from React components\nThe [demo app](https://github.com/solid/react-components/tree/master/demo)\nwill inspire you on how to use the components listed below.\n\n### 👮🏻‍♀️ Authentication\n#### Log the user in and out\nYou will need a copy of [popup.html](https://solid.github.io/solid-auth-client/dist/popup.html) in your application folder.\n```jsx\n\u003cLoginButton popup=\"popup.html\"/\u003e\n\u003cLogoutButton\u003eLog me out\u003c/LogoutButton\u003e\n// Shows LoginButton or LogoutButton depending on the user's status\n\u003cAuthButton popup=\"popup.html\" login=\"Login here!\" logout=\"Log me out\"/\u003e\n```\n\n#### Display different content to logged in users\n```jsx\n\u003cLoggedOut\u003e\n  \u003cp\u003eYou are not logged in, and this is a members-only area!\u003c/p\u003e\n\u003c/LoggedOut\u003e\n\u003cLoggedIn\u003e\n  \u003cp\u003eYou are logged in and can see the special content.\u003c/p\u003e\n\u003c/LoggedIn\u003e\n```\n\n### 👍🏾 Social interactions\nWith Solid, people can _like_ any page or thing on the Web:\n```jsx\n\u003cLike/\u003e // the current page\n\u003cLike object=\"https://github.com/\"\u003eGitHub\u003c/Like\u003e\n\u003cLike object=\"[https://ruben.verborgh.org/profile/#me].friends\"\u003eRuben's website\u003c/Like\u003e\n\u003cDislike object=\"http://dbpedia.org/resource/Poverty\"\u003epoverty\u003c/Dislike\u003e\n\u003cFollow object=\"https://ruben.verborgh.org/profile/#me\"\u003eRuben\u003c/Follow\u003e\n```\n\nYour social interactions are stored in your own data pod.\nBuild your own interactions with an `\u003cActivityButton/\u003e`.\n\n### 🖥️ Get data from Solid\n#### Load data from the user and from the Web\n```jsx\n\u003cLoggedIn\u003e\n  \u003cp\u003eWelcome back, \u003cValue src=\"user.firstName\"/\u003e\u003c/p\u003e\n  \u003cImage src=\"user.image\" defaultSrc=\"profile.svg\" className=\"pic\"/\u003e\n  \u003cul\u003e\n    \u003cli\u003e\u003cLink href=\"user.inbox\"\u003eYour inbox\u003c/Link\u003e\u003c/li\u003e\n    \u003cli\u003e\u003cLink href=\"user.homepage\"\u003eYour homepage\u003c/Link\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/LoggedIn\u003e\n\n\u003ch2\u003eRandom friend of \u003cName src=\"[https://ruben.verborgh.org/profile/#me]\"/\u003e\u003c/h2\u003e\n\u003cValue src=\"[https://ruben.verborgh.org/profile/#me].friends.firstName\"/\u003e\n\n\u003ch2\u003eAll friends\u003c/h2\u003e\n\u003cList src=\"[https://ruben.verborgh.org/profile/#me].friends.firstName\"/\u003e\n\n\u003ch2\u003eRandom blog post\u003c/h2\u003e\n\u003cLink href=\"[https://ruben.verborgh.org/profile/#me].blog[schema:blogPost]\"/\u003e\n\n\u003ch2\u003eAll blog posts\u003c/h2\u003e\n\u003cList src=\"[https://ruben.verborgh.org/profile/#me].blog[schema:blogPost].label\"/\u003e\n\n```\n\n#### Create data expressions with LDflex\nSolid React data components\nuse the [LDFlex](https://github.com/solid/query-ldflex/) language\nto build paths to the data you want.\n\nFor example:\n- `\"user.firstName\"` will resolve to the logged in user's first name\n- `\"user.friends.firstName\"` will resolve to the first name of the user's friends\n- `\"[https://ruben.verborgh.org/profile/#me].homepage\"` will resolve to Ruben's homepage\n- `\"[https://ruben.verborgh.org/profile/#me].friends.firstName\"` will resolve to Ruben's friends' names\n\nLearn how to [create your own LDflex expressions](https://github.com/solid/query-ldflex/#creating-data-paths).\n\n#### Automatically refresh when data is updated\nDifferent Solid apps can write to the same documents at the same time.\nIf you put components inside of `\u003cLiveUpdate\u003e`,\nthey will refresh when data is updated externally.\nIn the `subscribe` attribute, list the documents that should be tracked for updates;\nset it to `*` (default) if you want to listen to all documents accessed by your app.\nUse live updates sparingly,\nsince change monitoring consumes additional resources,\nespecially when monitoring documents on different data pods.\n\n\n## 💪🏾 Create your own components\nThe Solid React library makes it easy\nto create your own components\nthat interact with the current user\nand fetch Linked Data from the Web.\nThis is easy thanks to [hooks](https://reactjs.org/docs/hooks-intro.html),\nintroduced in React 16.8.\nA good way to get started is by looking at the [implementation](https://github.com/solid/react-components/tree/master/src/components)\nof built-in components like\n[AuthButton](https://github.com/solid/react-components/blob/master/src/components/AuthButton.jsx),\n[Name](https://github.com/solid/react-components/blob/master/src/components/Name.jsx),\nand\n[List](https://github.com/solid/react-components/blob/master/src/components/List.jsx).\n\nNot a hooks user yet,\nor prefer writing components with functions instead of classes?\nOur [higher-order components](https://github.com/solid/react-components/blob/v1.3.1/README.md#-building-your-own-components)\nwill help you out.\n\n#### Identify the user\nIn Solid, people are identified by a WebID,\na URL that points to them and leads to their data.\n\nThe `useWebID` hook gives you the WebID\nof the currently logged in user as a string,\nwhich changes automatically whenever someone logs in or out.\nThe `useLoggedIn` and `useLoggedOut` hooks\nprovide similar functionality, but return a boolean value.\n\n```jsx\nimport { useWebId, useLoggedIn, useLoggedOut } from '@solid/react';\n\nfunction WebIdStatus() {\n  const webId = useWebId();\n  return \u003cspan\u003eYour WebID is {webId}.\u003c/span\u003e;\n}\n\nfunction Greeting() {\n  const loggedOut = useLoggedOut();\n  return \u003cspan\u003eYou are {loggedOut ? 'anonymous' : 'logged in' }.\u003c/span\u003e;\n}\n```\n\n#### Load data from the user or the Web\nThe `useLDflexValue` and `useLDflexList` hooks\nlet you load a single result or multiple results\nof an LDflex expression.\n\n```jsx\nimport { useLDflexValue, useLDflexList } from '@solid/react';\n\nfunction ConnectionCount() {\n  const name = useLDflexValue('user.firstName') || 'unknown';\n  const friends = useLDflexList('user.friends');\n  return \u003cspan\u003e{`${name}`} is connected to {friends.length} people.\u003c/span\u003e;\n}\n```\nNote how we convert `name` into a string through `` `${name}` ``.\nAlternatively, we could also use `name.value`.\nWe do this because LDflex values\nare [terms](https://rdf.js.org/data-model-spec/#term-interface)\nrather than strings,\nso they can have other properties like `language` and `termType`.\nAlso, an LDflex value can be used as a path again,\nso you can keep on adding properties.\n\nFinally, the `useLDflex` hook also returns status information about the expression.\nWhen its optional second argument is `true`, it returns a list.\n\n```jsx\nimport { List, useLDflex } from '@solid/react';\n\nfunction BlogPosts({ author = 'https://ruben.verborgh.org/profile/#me' }) {\n  const expression = `[${author}].blog[schema:blogPost].label`;\n  const [posts, pending, error] = useLDflex(expression, true);\n\n  if (pending)\n    return \u003cspan\u003eloading \u003cem\u003e({posts.length} posts so far)\u003c/em\u003e\u003c/span\u003e;\n  if (error)\n    return \u003cspan\u003eloading failed: {error.message}\u003c/span\u003e;\n\n  return \u003cul\u003e{posts.map((label, index) =\u003e\n           \u003cli key={index}\u003e{`${label}`}\u003c/li\u003e)}\n         \u003c/ul\u003e;\n}\n```\n\nIf your components should automatically refresh on updates\nwhen placed inside of a `\u003cLiveUpdate\u003e` component,\nuse the `useLiveUpdate` hook (already included in all 3 `useLDflex` hooks).\nIt returns the latest update as `{ timestamp, url }`.\n\n## License\n©2018–present [Ruben Verborgh](https://ruben.verborgh.org/),\n[MIT License](https://github.com/solid/react-components/blob/master/LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRubenVerborgh%2FSolid-React-Components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FRubenVerborgh%2FSolid-React-Components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRubenVerborgh%2FSolid-React-Components/lists"}