{"id":23364515,"url":"https://github.com/fission-codes/contacts-react","last_synced_at":"2025-06-11T20:36:04.504Z","repository":{"id":99788395,"uuid":"377862859","full_name":"fission-codes/contacts-react","owner":"fission-codes","description":"React components for working with contacts data.","archived":false,"fork":false,"pushed_at":"2023-01-23T23:37:03.000Z","size":154,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-03T04:56:18.276Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/fission-codes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2021-06-17T14:40:11.000Z","updated_at":"2023-01-23T23:37:05.000Z","dependencies_parsed_at":"2023-05-13T10:15:45.801Z","dependency_job_id":null,"html_url":"https://github.com/fission-codes/contacts-react","commit_stats":null,"previous_names":["fission-suite/contacts-react"],"tags_count":0,"template":false,"template_full_name":"fission-codes/project-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fission-codes%2Fcontacts-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fission-codes%2Fcontacts-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fission-codes%2Fcontacts-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fission-codes%2Fcontacts-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fission-codes","download_url":"https://codeload.github.com/fission-codes/contacts-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247354416,"owners_count":20925435,"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-12-21T13:16:32.763Z","updated_at":"2025-04-07T22:27:43.194Z","avatar_url":"https://github.com/fission-codes.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/fission-codes/kit/blob/main/images/logo-icon-coloured.png?raw=true\" alt=\"Fission logo\" width=\"100\" /\u003e\n\n  \u003ch1\u003eContacts React\u003c/h1\u003e\n\n[![Build Status](https://travis-ci.org/fission-suite/contacts-react.svg?branch=master)](https://travis-ci.org/fission-suite/contacts-react)\n[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://github.com/fission-suite/blob/master/LICENSE)\n[![Maintainability](https://api.codeclimate.com/v1/badges/44fb6a8a0cfd88bc41ef/maintainability)](https://codeclimate.com/github/fission-suite/contacts-react/maintainability)\n[![Built by FISSION](https://img.shields.io/badge/⌘-Built_by_FISSION-purple.svg)](https://fission.codes)\n[![Discord](https://img.shields.io/discord/478735028319158273.svg)](https://discord.gg/zAQBDEq)\n[![Discourse](https://img.shields.io/discourse/https/talk.fission.codes/topics)](https://talk.fission.codes)\n\n\u003c/div\u003e\n\nReact components for working with contacts data.\n\n## Contacts Data\n\nThese components assume contacts in the form of:\n\n```json\n{\n  \"uuid\": \"a58bca0d-a38f-42a1-8b33-bcd53027881c\",\n  \"label\": \"Main ETH account\",\n  \"notes\": \"💰\",\n  \"createdAt\": \"2021-05-26T16:03:03Z\",\n  \"modifiedAt\": \"2021-05-26T16:03:03Z\",\n  \"address\": {\n    \"accountAddress\": \"0xab16a96d359ec26a11e2c2b3d8f8b8942d5bfcdb\",\n    \"chainId\": \"eip155:1\"\n  }\n}\n```\n\nYou can find the JSON schema in the [repo](https://github.com/fission-suite/contacts/blob/main/src/Schemas/Dawn/Contact.json) from the contacts app, which is live at [contacts.fission.app](https://contacts.fission.app/). In the app you can view and manage your contacts. By default it assumes the contacts data in the `private/Documents/Contacts/` directory.\n\n## Components\n\nTo illustrate how easy it is to work with the [webnative](https://github.com/fission-suite/webnative) filesystem, we're making a few React components to easily render contacts in your React app.\n\n```js\nimport { List } from '@fission-suite/contacts-react'\n\nwebnative.initialise({ ... }).then(state =\u003e {\n  if (state.fs) {\n    return \u003cList fileSystem={state.fs} /\u003e\n  }\n})\n```\n\n`List` component properties:\n\n```js\n{\n  blockchainNetworksPath,       // default: @fission-suite/contacts-react/List.DEFAULT_BLOCKCHAIN_NETWORKS_PATH\n  emptyStateComponent,          // default: @fission-suite/contacts-react/List.EmptyState\n  fileSystem,                   // REQUIRED\n  itemComponent,                // default: @fission-suite/contacts-react/Contact.Contact\n  libraryPath,                  // default: @fission-suite/contacts-react/List.DEFAULT_PATH\n  listElement,                  // default: \"dl\"\n  loadingComponent,             // default: @fission-suite/contacts-react/List.Loading\n}\n```\n\n`Contact` component properties:\n\n```js\n{\n  blockchainNetworks, // default: {}, passed from the default `List` component\n    contact; // REQUIRED\n}\n```\n\nThe default `Contact` and loading components are unstyled, so most likely you'll want to provide styled components instead.\n\n```js\nimport {\n  isBlockchainAddress,\n  lookUpBlockchainNetwork,\n} from \"@fission-suite/contacts-react/Contact\";\n\n\u003cList\n  fileSystem={state.fs}\n  listElement=\"ol\"\n  emptyStateComponent={\u003cdiv\u003eNothing here yet.\u003c/div\u003e}\n  loadingComponent={() =\u003e \u003cdiv\u003eLoading …\u003c/div\u003e}\n  itemComponent={({ blockchainNetworks, contact }) =\u003e {\n    if (isBlockchainAddress(contact.address)) {\n      const network = lookUpBlockchainNetwork(\n        contact.address,\n        blockchainNetworks\n      );\n      return (\n        \u003cli\u003e\n          {contact.address.accountAddress}\n          {network.label}\n        \u003c/li\u003e\n      );\n    }\n\n    return \u003c\u003e\u003c/\u003e;\n  }}\n/\u003e;\n```\n\n## Example\n\nThere is an example in the [example](example/) directory, which is also available at [contacts-react.fission.app](https://contacts-react.fission.app). That also serves as an example for the React components from the [Fission UI Kit](https://github.com/fission-suite/kit).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffission-codes%2Fcontacts-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffission-codes%2Fcontacts-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffission-codes%2Fcontacts-react/lists"}