https://github.com/fission-codes/contacts-react
React components for working with contacts data.
https://github.com/fission-codes/contacts-react
Last synced: about 1 year ago
JSON representation
React components for working with contacts data.
- Host: GitHub
- URL: https://github.com/fission-codes/contacts-react
- Owner: fission-codes
- License: apache-2.0
- Created: 2021-06-17T14:40:11.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-23T23:37:03.000Z (over 3 years ago)
- Last Synced: 2025-04-03T04:56:18.276Z (about 1 year ago)
- Language: JavaScript
- Size: 150 KB
- Stars: 0
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
Contacts React
[](https://travis-ci.org/fission-suite/contacts-react)
[](https://github.com/fission-suite/blob/master/LICENSE)
[](https://codeclimate.com/github/fission-suite/contacts-react/maintainability)
[](https://fission.codes)
[](https://discord.gg/zAQBDEq)
[](https://talk.fission.codes)
React components for working with contacts data.
## Contacts Data
These components assume contacts in the form of:
```json
{
"uuid": "a58bca0d-a38f-42a1-8b33-bcd53027881c",
"label": "Main ETH account",
"notes": "💰",
"createdAt": "2021-05-26T16:03:03Z",
"modifiedAt": "2021-05-26T16:03:03Z",
"address": {
"accountAddress": "0xab16a96d359ec26a11e2c2b3d8f8b8942d5bfcdb",
"chainId": "eip155:1"
}
}
```
You 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.
## Components
To 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.
```js
import { List } from '@fission-suite/contacts-react'
webnative.initialise({ ... }).then(state => {
if (state.fs) {
return
}
})
```
`List` component properties:
```js
{
blockchainNetworksPath, // default: @fission-suite/contacts-react/List.DEFAULT_BLOCKCHAIN_NETWORKS_PATH
emptyStateComponent, // default: @fission-suite/contacts-react/List.EmptyState
fileSystem, // REQUIRED
itemComponent, // default: @fission-suite/contacts-react/Contact.Contact
libraryPath, // default: @fission-suite/contacts-react/List.DEFAULT_PATH
listElement, // default: "dl"
loadingComponent, // default: @fission-suite/contacts-react/List.Loading
}
```
`Contact` component properties:
```js
{
blockchainNetworks, // default: {}, passed from the default `List` component
contact; // REQUIRED
}
```
The default `Contact` and loading components are unstyled, so most likely you'll want to provide styled components instead.
```js
import {
isBlockchainAddress,
lookUpBlockchainNetwork,
} from "@fission-suite/contacts-react/Contact";
Nothing here yet.}
loadingComponent={() =>
Loading …}
itemComponent={({ blockchainNetworks, contact }) => {
if (isBlockchainAddress(contact.address)) {
const network = lookUpBlockchainNetwork(
contact.address,
blockchainNetworks
);
return (
{contact.address.accountAddress}
{network.label}
);
}
return <>>;
}}
/>;
```
## Example
There 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).