React : สร้าง Random Avatar สวยๆ ด้วย dicebear/avatars

บล็อกนี้จะพามารู้จักกับ library ที่ช่วยให้เรามีรูป avatars สวยๆ น่ารักๆ มาไว้ในงานในแอปกัน

library นี้ชื่อว่า dicebear avatars เป็นแหล่งรวบรวมรูป avatars สวยๆ ไว้มากมาย เราสามารถเลือกใช้งานได้ตามใจชอบ วิธีการติดตั้งก็ไม่ยุ่งยาก สามารถทำได้ตามขั้นตอนต่อไปนี้

วิธีที่ 1 ติดตั้งไลบรารี่ และเขียนโค้ดเพื่อสร้างภาพ Avatar ขึ้นมาใช้งาน

1. ติดตั้งไลบรารี่ dicbear avatars ที่โปรเจคของเราก่อน

npm install --save @dicebear/avatars

2. เลือก avatars ที่เราต้องการ ที่ https://avatars.dicebear.com/styles

3. เมื่อเลือกสไตล์ของ avatar ได้แล้วก็ต้องมาติดตั้งที่โปรเจคของเราด้วย

ตัวอย่างเลือก สไตล์ avataaars

npm install --save @dicebear/avatars-avataaars-sprites

4. วิธีการใช้งานก็ไม่ยาก

import { createAvatar } from '@dicebear/avatars';
import * as style from '@dicebear/avatars-avataaars-sprites';

let svg = createAvatar(style, {
  seed: 'custom-seed',
  // ... and other options
});

ฟังก์ชัน createAvatar จะทำการสร้างรูป avatar โดยจะสุ่มลักษณะตาม seed และ options ที่เรากำหนด

เมื่อสร้าง avatat เสร็จแล้ว ฟังก์ชันนี้จะส่งค่า string ที่เป็น svg (html tag) เออมา

เวลาที่เรานำไปใช้ก็แค่แปลงจาก svg (html tag) ที่เป็น string ให้แสดงเป็น html โดยใช้

<div dangerouslySetInnerHTML={{ __html: svg1 }} />

การใช้ dangerouslySetInnerHTML อาจจะทำให้เกิดช่องโหว่ได้ ดังนั้นควรใช้อย่างระมัดระวัง!!!

การนำไปใช้งานในโปรเจค React

ตัวอย่างต่อไปนี้เขียนด้วย Typescript และทำการรวบ Component ไว้ในไฟล์ App.tsx โดยมี Component หลักๆ ได้แก่

• PersonItem คอมโพเน้นสำหรับแสดงไอคอนและชื่อคน
• PersonList คอมโพเน้นสำหรับแสดงรายการของ PersonItem ตามจำนวน persons ที่กำหนดเอาไว้

.

วิธีที่ 2 ไม่ต้องติดตั้งโค้ด สามารถเรียกใช้ภาพได้ผ่าน API ได้ทันที

เราจะทำการก้อปปี้ HTTP-API ของชุดที่เราต้องการใช้ ตัวอย่างจะใช้ชุดของ Big Ears

https://avatars.dicebear.com/api/big-ears/:seed.svg

ในตัวอย่างจะแสดงให้เห็นว่า เราสามารถนำเอา API Url มาเรียกใช้ในแท็ก img ได้โดยตรงได้เลย โดยเปลี่ยน :seed เป็นค่าที่ต่างกันไป ในที่นี่จะใช้เป็นชื่อ

ตัวอย่างโค้ด

สรุป

disbear/avatars ที่นำมาเสนอนี้เป็นไลบรารี่ที่ช่วยทำการสุ่ม/สร้างรูป avatar ซึ่ง disbear/avatars จะเป็นศูนย์กลางที่รวบรวม avatars หลายๆ แบบเอาไว้ให้เรา และเราสามารถเลือกใช้งานได้ โดยการเรียกใช้งานสามารถเรียกใช้ผ่าน HTTP API และแบบติดตั้งไลบรารี่ลงโปรเจคของเรา

อ้างอิง

1. https://avatars.dicebear.com/
2. https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml