Giter VIP home page Giter VIP logo

react-native-vcards's Introduction

React Native vCards - vCards JS for use with React Native

Build Status

Updated for newer versions of react-native-fs. Now listed as a peerDependency.

Create vCards to import contacts into Outlook, iOS, Mac OS, and Android devices from your website or application.

Screenshot

Install

Note that this package requires react-native-fs for saving files. If you have installed rnpm, the easy way to install react-native-fs is the following:

npm install react-native-fs && rnpm link react-native-fs

Then to install this package, run the following:

npm install react-native-vcards@https://github.com/idxbroker/react-native-vcards.git --save

Usage

Below is a simple example of how to create a basic vCard and how to save it to a file, or view its contents from the console.

Basic vCard

import vCard from 'react-native-vcards';

//create a new vCard
contact = vCard();

//set properties
contact.firstName = 'Eric';
contact.middleName = 'J';
contact.lastName = 'Nesser';
contact.organization = 'ACME Corporation';
contact.photo.attachFromUrl('https://avatars2.githubusercontent.com/u/5659221?v=3&s=460', 'JPEG');
contact.workPhone = '312-555-1212';
contact.birthday = new Date('01-01-1985');
contact.title = 'Software Developer';
contact.url = 'https://github.com/enesser';
contact.note = 'Notes on Eric';

//save to file
contact.saveToFile('./eric-nesser.vcf');

//get as formatted string
console.log(contact.getFormattedString());

Embedding Images

You can embed images in the photo or logo field instead of linking to them from a URL using base64 encoding.

//can be Windows or Linux/Unix path structures, and JPEG, PNG, GIF formats
contact.photo.embedFromFile('/path/to/file.png');
contact.logo.embedFromFile('/path/to/file.png');

Complete Example

The following shows a vCard with everything filled out.

import vCard from 'react-native-vcards';

//create a new vCard
contact = vCard();

//set basic properties shown before
contact.firstName = 'Eric';
contact.middleName = 'J';
contact.lastName = 'Nesser';
contact.organization = 'ACME Corporation';

//link to image
contact.photo.attachFromUrl('https://avatars2.githubusercontent.com/u/5659221?v=3&s=460', 'JPEG');

//or embed image
contact.photo.attachFromUrl('/path/to/file.jpeg');

contact.workPhone = '312-555-1212';
contact.birthday = new Date('01-01-1985');
contact.title = 'Software Developer';
contact.url = 'https://github.com/enesser';
contact.workUrl = 'https://acme-corporation/enesser';
contact.note = 'Notes on Eric';

//set other vitals
contact.nickname = 'Scarface';
contact.namePrefix = 'Mr.';
contact.nameSuffix = 'JR';
contact.gender = 'M';
contact.anniversary = new Date('01-01-2004');
contact.role = 'Software Development';

//set other phone numbers
contact.homePhone = '312-555-1313';
contact.cellPhone = '312-555-1414';
contact.pagerPhone = '312-555-1515';

// set fax/ facsimile numbers
contact.homeFax = '312-555-1616';
contact.workFax = '312-555-1717';

// set email addresses
contact.email = '[email protected]';
contact.workEmail = '[email protected]';

//set logo of organization or personal logo (also supports embedding, see above)
contact.logo.attachFromUrl('https://avatars2.githubusercontent.com/u/5659221?v=3&s=460', 'JPEG');

//set URL where the vCard can be found
contact.source = 'http://mywebpage/myvcard.vcf';

//set address information
contact.homeAddress.label = 'Home Address';
contact.homeAddress.street = '123 Main Street';
contact.homeAddress.city = 'Chicago';
contact.homeAddress.stateProvince = 'IL';
contact.homeAddress.postalCode = '12345';
contact.homeAddress.countryRegion = 'United States of America';

contact.workAddress.label = 'Work Address';
contact.workAddress.street = '123 Corporate Loop\nSuite 500';
contact.workAddress.city = 'Los Angeles';
contact.workAddress.stateProvince = 'CA';
contact.workAddress.postalCode = '54321';
contact.workAddress.countryRegion = 'United States of America';

//set social media URLs
contact.socialUrls['facebook'] = 'https://...';
contact.socialUrls['linkedIn'] = 'https://...';
contact.socialUrls['twitter'] = 'https://...';
contact.socialUrls['flickr'] = 'https://...';
contact.socialUrls['custom'] = 'https://...';

//you can also embed photos from files instead of attaching via URL
contact.photo.embedFromFile('photo.jpg');
contact.logo.embedFromFile('logo.jpg');

contact.version = '3.0'; //can also support 2.1 and 4.0, certain versions only support certain fields

//save to file
const documentPath = rnfs.DocumentDirectoryPath;
contact.saveToFile(`${documentPath}/eric-nesser.vcf`);

//get as formatted string
console.log(contact.getFormattedString());

Contributions

Contributions are always welcome!

Thanks to mplno, lop-cz, jkrenge.

License

Copyright (c) 2014-2015 Eric J Nesser MIT

react-native-vcards's People

Contributors

enesser avatar sheparddw avatar meta-dreamer avatar jkrenge avatar defi-bear avatar mplno avatar

Watchers

James Cloos avatar

Forkers

ccostello97

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.