This content originally appeared on DEV Community and was authored by Loveena Saran
Appwrite provides an AMAZING solution that offers YOU an array of REST APIs , tools , Management Console UI for YOUR core backend needs.
If you haven't already try it out for yourself AppWrite
Go Ahead don't be shy...
Are YOU Looking to make your Service Standout?
Are YOU Tired of importing multiple packages for Icon support?
Are YOU Hoping to make your Life a little bit easier?
Enhance your Appwrite App with Images, Icons, and Avatars...
Adding payment methods logos , fetching the desired country flags and Generating QR codes is all that you desire.
Be it Food Delivery Services ,Language Learning App or a Fintech App these small additions that will make it a lot easier.
How can you use Appwrite's Avatar API ?
- Create a Service Class to fetch the endpoint. In our case avatars and create a constructor to access it within the method.
class AppwriteService {
constructor() {
appwrite.setEndpoint(Server.endpoint).setProject(Server.project);
this.avatars= appwrite.avatars;
}
2.Access your desired method getCreditCard present under Avatar API and pass in the mandatory attributes cardname for the method to work.
Optional Attributes Include: width,height,quality
createCreditAvatar =(cardname) =>{
return this.avatars.getCreditCard(cardname);
}
3.Call the method Created in your file that you desire to add your avatar. Don't forget to pass the value to the attributes that were Set earlier.
Example: amex, argencard, cabal, censosud, diners, discover, elo, hipercard, jcb, mastercard, naranja, targeta-shopping, union-china-pay, visa, mir, maestro
let creditcard = appwrite.createCreditAvatar('amex');
console.log(creditcard);
4.In the return section of your Project call the component inside the image tag to view the icon
return(
<div >
<img src={creditcard} />
</div>
);
5.And Voilà!! You have your icon displayed on your UI
Few Other Examples To get you started:
createFlagAvatar =(flagname) =>{
return this.avatars.getFlag(flagname);
}
createQrAvatar =(text,size) =>{
return this.avatars.getQR(text,size);
}
let flagname = appwrite.createFlagAvatar('IN');
let qrcode = appwrite.createQrAvatar('FinTechApp',100);
console.log(flagname);
console.log(qrcode);
return(
<div >
<img src={flagname} />
<br/>
<img src={qrcode} />
<br/>
</div>
);
Start Appwriting Away!!!
Read for any Doubts:
Getting Started with Appwrite
Appwrite React Series
This content originally appeared on DEV Community and was authored by Loveena Saran
Loveena Saran | Sciencx (2021-10-13T06:46:17+00:00) Avatar API support in Appwrite. Retrieved from https://www.scien.cx/2021/10/13/avatar-api-support-in-appwrite/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.