chore: update

NativeScript · Ombuweb · Dec 29, 2022 · Jan 26, 2023 · Jan 26, 2023 · Jan 26, 2023
commit 48264fd9955ae7d325e76b0da80a3e3eafdc0de9
diff --git a/packages/animated-circle/README.md b/packages/animated-circle/README.md
@@ -1,23 +1,48 @@
 # @nativescript/animated-circle
 
-A plugin that creates an animated circle (animates the border of the circle) on iOS and Android.
+A plugin that creates a circular progress bar on iOS and Android.
 
 | ![Android animated circle demo video](/packages/animated-circle/images/animated-circle-android.gif) | ![iOS animated circle demo video](/packages/animated-circle/images/animated-circle-ios.gif)
 |:--------|:---------
 | `Android` | `iOS`
 
+## Contents
+* [Installation](#installation)
+* [Use @nativescript/animated-circle](#use-nativescriptanimated-circle)
+  * [Core](#core)
+  * [Angular](#angular)
+  * [Vue](#vue)
+  * [Svelte](#svelte)
+  * [React](#react)
+* [API](#api)
+* [License](#license)
+
 ## Installation
 
 ```cli
 npm install @nativescript/animated-circle
 ```
 
-## Usage
+## Use @nativescript/animated-circle
 
 ### Core
+
+1. Register the plugin namespace with Page's `xmlns` attribute and provide your prefix( `ui`, for example).
+
+```xml
+<Page xmlns:ui="@nativescript/animated-circle">
+```
+
+2. Access the `AnimatedCircle` view through the prefix.
+
+```xml
+<ui:AnimatedCircle ... />
+```
+
 ```xml
 <Page xmlns="http://schemas.nativescript.org/tns.xsd"
   xmlns:ui="@nativescript/animated-circle">
+
     <ui:AnimatedCircle
         backgroundColor="transparent"
         width="200"
@@ -36,14 +61,31 @@ npm install @nativescript/animated-circle
 </Page>
 ```
 ---
+### Angular
+
+1. Add `NativeScriptAnimatedCircleModule` to the module imports where you want to use the plugin.
+
+```typescript
+import { NativeScriptAnimatedCircleModule } from '@nativescript/animated-circle/angular';
+imports: [NativeScriptAnimatedCircleModule];
+```
+
+2. Use the plugin in HTML as follows:
+
+```xml
+<AnimatedCircle backgroundColor="transparent" width="200" height="200" animated="true" animateFrom="0" rimColor="#fff000" barColor="#ff4081" rimWidth="25" [progress]="circleProgress" [text]="progress + '%'" textSize="22" textColor="#336699"></AnimatedCircle>
+```
+---
 ### Vue
 
-First, register the plugin in the `app.ts` file. Then use it in a `.vue` file.
+1. Register the plugin in the `app.ts` file. 
 ```ts
 import { registerElement } from 'nativescript-vue';
 
 registerElement("AnimatedCircle", ()=> require("@nativescript/animated-circle").AnimatedCircle)
 ```
+2. Use it in a `.vue` file.
+
 ```xml
 <AnimatedCircle
         backgroundColor="transparent"
@@ -61,29 +103,17 @@ registerElement("AnimatedCircle", ()=> require("@nativescript/animated-circle").
         textSize="28"
         textColor="red" />
 ```
----
-### Angular
-
-- Add the `NativeScriptAnimatedCircleModule` to your module imports where you will use the plugin.
-
-```typescript
-import { NativeScriptAnimatedCircleModule } from '@nativescript/animated-circle/angular';
-imports: [NativeScriptAnimatedCircleModule];
-```
-
-```xml
-<AnimatedCircle backgroundColor="transparent" width="200" height="200" animated="true" animateFrom="0" rimColor="#fff000" barColor="#ff4081" rimWidth="25" [progress]="circleProgress" [text]="progress + '%'" textSize="22" textColor="#336699"></AnimatedCircle>
-```
-
 ---
 ### Svelte
-Register the plugin in the `app.ts` file and then use it in markup as follows:
+1. Register the plugin in the `app.ts` file:
 
 ```ts
 import {registerNativeViewElement} from "svelte-native/dom"
 
 registerNativeViewElement("animatedCircle", ()=> require("@nativescript/animated-circle").AnimatedCircle)
 ```
+2. Use the plugin in markup:
+
 ```xml
 <animatedCircle 
     backgroundColor="transparent"
@@ -101,9 +131,58 @@ registerNativeViewElement("animatedCircle", ()=> require("@nativescript/animated
     textColor="red"
     />
 ```
+---
+### React
+1. Register
+```ts
+interface AnimatedCircleAttributes extends ViewAttributes {
+    progress?: number
+    animated?: boolean
+    animateFrom?: number
+    text?: string
+    textSize? : number
+    textColor?: string
+    rimColor? : string
+    barColor?: string
+    rimWidth?: number 
+    clockwise?: boolean
+}
+
+declare global {
+    module JSX {
+        interface IntrinsicElements {
+
+            animatedCircle: NativeScriptProps<AnimatedCircleAttributes, AnimatedCircle>
+        }
+    }
+}
+
+registerElement("animatedCircle", ()=> require("@nativescript/animated-circle").AnimatedCircle)
+
+```
 
-## API Reference
+2. Use the plugin in markup.
+```xml
+<stackLayout marginTop={30}>
+  <animatedCircle
+      backgroundColor="transparent"
+      width={200}
+      height={200}
+      animated={true}
+      animateFrom={0}
+      rimColor="#000"
+      barColor="#C4BF55"
+      clockwise={true}
+      rimWidth={20}
+      progress={this.state.progress}
+      text={this.state.progress + '%'}
+      textSize={28}
+      textColor="#000"
+  />
+</stackLayout>
+```
 
+## API
 
 | Property          | Type | Default | Description                                            |
 | ----------------- |------| ------- | ------------------------------------------------------ |