From 1b1794eb3d0220a3ecf899e22f1bd31d3f0bd554 Mon Sep 17 00:00:00 2001 From: Abdelrahman Ashraf Date: Fri, 3 Nov 2023 13:17:34 +0700 Subject: [PATCH] =?UTF-8?q?docs:=20=E2=9C=8F=EF=B8=8F=20add=20README=20liv?= =?UTF-8?q?e=20example=20(#28)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs: ✏️ add README live example * chore: 🤖 update the live example link * chore: 🤖 add usage via CDN --- packages/web/README.md | 53 ++++++++++++++++++++++++++++++++++++++---- 1 file changed, 48 insertions(+), 5 deletions(-) diff --git a/packages/web/README.md b/packages/web/README.md index 074ed54b..6d748afd 100644 --- a/packages/web/README.md +++ b/packages/web/README.md @@ -1,5 +1,9 @@ # @lottiefiles/dotlottie-web +![npm](https://img.shields.io/npm/v/@lottiefiles/dotlottie-web) +![npm bundle size](https://img.shields.io/bundlephobia/min/@lottiefiles/dotlottie-web) +![NPM](https://img.shields.io/npm/l/@lottiefiles/dotlottie-web) + A JavaScript library for rendering [lottie](https://lottiefiles.github.io/lottie-docs/) and [dotLottie](https://dotlottie.io) animations in the browser. > 🚧 **Beta Alert:** We're still refining! The APIs in this package may undergo changes. @@ -8,6 +12,7 @@ A JavaScript library for rendering [lottie](https://lottiefiles.github.io/lottie - [Installation](#installation) - [Usage](#usage) +- [Live Example](#live-example) - [Options](#options) - [Properties](#properties) - [Methods](#methods) @@ -22,23 +27,61 @@ npm install @lottiefiles/dotlottie-web ## Usage +### Via npm + +After installation, you can import `DotLottie` in your JavaScript or TypeScript module: + ```html - - + + ``` -```javascript -// JavaScript +```js import { DotLottie } from '@lottiefiles/dotlottie-web'; const dotLottie = new DotLottie({ autoplay: true, loop: true, canvas: document.getElementById('my-canvas'), - src: "https://example.com/path/to/animation.lottie", // or "https://example.com/path/to/animation.json" + src: "https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie", // or .json file }); ``` +### Via CDN + +```html + + + + + + @lottiefiles/dotlottie-web | basic example + + + + + + + +``` + +## Live Example + +[![Edit @lottiefiles/dotlottie-web basic example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/lottiefiles-dotlottie-web-basic-example-tcy3rv?autoresize=1&fontsize=14&hidenavigation=1&theme=dark) + ## Options | Option | Type | Required | Default | Description |