npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@diadal/contact

v0.1.1

Published

Contacts3 Plugin for Capacitor

Downloads

4

Readme

Prerequisites

Setup your project with Capacitor. For details check here: https://capacitorjs.com

cd my-app
npm install --save @capacitor/core @capacitor/cli

Initalize Capacitor

npx cap init

Add the platforms you want to use.

npx cap add android
npx cap add ios
npx cap add electron

Installation

Install:

npm i --save @diadal/contact

Sync:

npx cap sync

iOS

For iOS you need to set a usage description in your info.plist file. (Privacy Setting) Open xCode search for your info.plist file and press the tiny "+". Add the following entry:

Privacy - Contacts Usage Description

Give it a value like:

"We need access to your contacts in order to do something."

Android Notes

For Android you have to add the permisions in your AndroidManifest.xml. Add the following permissions before the closing of the "manifest" tag.

<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS"/>

Next import the capContacts class to your MainActivity

// Initializes the Bridge
    this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
      // Additional plugins you've installed go here
      // Ex: add(TotallyAwesomePlugin.class);
      add(Contacts.class);
    }});

Make sure to import it properly as well.

import ch.byrds.capacitor.contacts.Contacts;

NOTE: On Android you have to ask for permission first, before you can fetch the contacts. Use the getPermissions() method before you try to fetch contacts using getContacts().

Usage / Examples

You have the following Methods available:

export interface ContactsPlugin {
  getPermissions(): Promise<PermissionStatus>;
  getContacts(): Promise<{contacts: Contact[]}>;
}

If you're considering to use this plugin you most likely want to retrive contacts a users contacts:

Import the Plugin in your TS file:

import { Plugins } from "@capacitor/core";
const  { Contacts } = Plugins;

Next use it and console log the result:

Contacts.getContacts().then(result => {
    console.log(result);
    for (const contact of result.contacts) {
        console.log(contact);
    }
});

That's it. Do Whatever you want with the retrived contacts.

If you're trying to build something like "contacts matching" based on phone numbers i recommend using google libphonenumber: https://www.npmjs.com/package/google-libphonenumber

In order to match them properly you need to format them before you can match or store them properly.

Interfaces

export interface PermissionStatus {
  granted: boolean;
}

export interface Contact {
  contactId: string;
  displayName?: string;
  phoneNumbers: PhoneNumber[];
  emails: EmailAddress[];
  photoThumbnail?: string;
  organizationName?: string;
  organizationRole?: string;
  birthday?: string;
}

export interface PhoneNumber {
  label?: string;
  number?: string;
}

export interface EmailAddress {
  label?: string;
  address?: string;
}

Built With

  • Swift 5
  • Java
  • Angular
  • Capacitor

Authors

License

MIT

Contributors

API

getPermissions()

getPermissions() => Promise<PermissionStatus>

Returns: Promise<PermissionStatus>


getContacts()

getContacts() => Promise<{ contacts: Contact[]; }>

Returns: Promise<{ contacts: Contact[]; }>


Interfaces

PermissionStatus

| Prop | Type | | ------------- | -------------------- | | granted | boolean |

Contact

| Prop | Type | | ---------------------- | --------------------------- | | contactId | string | | displayName | string | | phoneNumbers | PhoneNumber[] | | emails | EmailAddress[] | | photoThumbnail | string | | organizationName | string | | organizationRole | string | | birthday | string |

PhoneNumber

| Prop | Type | | ------------ | ------------------- | | label | string | | number | string |

EmailAddress

| Prop | Type | | ------------- | ------------------- | | label | string | | address | string |