@wuilmerj24/url-preview

npm install @wuilmerj24/url-preview

Component Documentation

This component allows you to configure various aspects of the UI, including colors, border radius, and the type of view. Below is a table listing the available attributes and their respective types.

| Attribute | Type | Descriptions | |-----------|------|--------------| | url | string | URL of the web page from which information will be fetched. | | bgColor | string | Background color of the container.| | titleTextColor | string | Text color used for the title.| | descriptionTextColor | string | Text color used for the description. | | borderRadiusImage | number | Border radius applied to the image within the container. | | loadingColor | string | Color of the loading indicator shown while fetching information. | | borderRadius | number | Border radius applied to the container, can be a string, number, or specific length units. |

Examples

NativeScript Core

To use the component in a NativeScript Core project, add the following XML namespace to your page and use the UrlPreview xmlns:up="@wuilmerj24/url-preview" view as shown below:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:up="@wuilmerj24/url-preview">
    <ActionBar title="URL Preview Example" />

    <StackLayout>
        <!-- URL Preview Component -->
        <up:UrlPreview url="" />
    </StackLayout>
</Page>

NativeScript Angular

import {NativeScriptUrlPreviewModule} from "@wuilmerj24/url-preview/angular"

@NgModule({
  imports: [
    NativeScriptUrlPreviewModule // this line
  ],
  declarations: [],
  schemas: [NO_ERRORS_SCHEMA],
})
export class AppModule {}

<UrlPreview url="" > </UrlPreview>

If you only want to get information and create your own widget, use getData like this.

const urlPreview: UrlPreview = new UrlPreview();
urlPreview.getData("https://www.npmjs.com/package/@wuilmerj24/url-preview").then((res)=>{
    console.log(res)
}).catch((err)=>{
    console.log(err)
})

License

Apache License Version 2.0