New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@uploadcare/react-uploader
Advanced tools
@uploadcare/react-uploader - npm Package Compare versions
Comparing version 0.0.1-alpha.4 to 0.0.1-alpha.5
| import { ConfigType } from '@uploadcare/blocks'; | ||
| import { EventType } from '@uploadcare/blocks'; | ||
| import { EventMap } from '@uploadcare/blocks'; | ||
| import { FC } from 'react'; | ||
@@ -13,6 +13,9 @@ import { default as React_2 } from 'react'; | ||
| declare type TEvents = typeof EventType; | ||
| declare type TDefaultProps = { | ||
| className?: string; | ||
| ctxName?: string; | ||
| }; | ||
| declare type TEventsSchema = { | ||
| [K in keyof TEvents as TPrefixOnAndCamelCase<K>]: TEvents[K]; | ||
| [K in keyof EventMap as TPrefixOnAndCamelCase<K>]: EventMap[K]; | ||
| }; | ||
@@ -24,3 +27,3 @@ | ||
| export declare type TProps = TRefUploadCtxProvider & TPropsWithEvents & TPropsWithConfig; | ||
| export declare type TProps = TDefaultProps & TRefUploadCtxProvider & TPropsWithEvents & TPropsWithConfig; | ||
@@ -35,4 +38,6 @@ declare type TPropsWithConfig = Partial<ConfigType>; | ||
| declare type TToCamelCase<S extends string> = S extends `${infer Head}_${infer Tail}` ? `${Lowercase<Head>}${Capitalize<TToCamelCase<Tail>>}` : Lowercase<S>; | ||
| declare type TToCamelCase<S extends string> = S extends `${infer Head}-${infer Tail}` ? `${Lowercase<Head>}${Capitalize<TToCamelCase<Tail>>}` : Lowercase<S>; | ||
| export { UploadCtxProvider } | ||
| export { } |
| { | ||
| "name": "@uploadcare/react-uploader", | ||
| "version": "0.0.1-alpha.4", | ||
| "version": "0.0.1-alpha.5", | ||
| "private": false, | ||
@@ -5,0 +5,0 @@ "type": "module", |
@@ -9,6 +9,11 @@ # Uploadcare React Uploader | ||
| Uploadcare React Uploader. | ||
| Uploadcare React Uploader. Allows you to use Uploader in React applications according to React canons. | ||
| ### (@TODO: Add a link to the documentation) | ||
| [![Build Status][badge-build]][build-url] | ||
| [![NPM version][npm-img]][npm-url] | ||
| [![GitHub release][badge-release-img]][badge-release-url] | ||
| [![Uploadcare stack on StackShare][badge-stack-img]][badge-stack-url] | ||
| ## Install | ||
@@ -20,16 +25,71 @@ | ||
| ## Usage | ||
| ```jsx | ||
| import { FileUploaderRegular, FileUploaderMinimal, FileUploaderInline } from "@uploadcare/react-uploader"; | ||
| import { FileUploaderRegular } from "@uploadcare/react-uploader"; | ||
| <FileUploaderRegular pubkey="YOUR_PUBLIC_KEY" />; | ||
| <FileUploaderRegular pubkey="YOUR_PUBLIC_KEY"/>; | ||
| ``` | ||
| <FileUploaderMinimal pubkey="YOUR_PUBLIC_KEY" />; | ||
| ## File Uploader API | ||
| <FileUploaderInline pubkey="YOUR_PUBLIC_KEY" />; | ||
| It is possible to get ref on UploadCtxProvider via `ref`. In this way it is possible to additional uploader management | ||
| methods. | ||
| ```jsx | ||
| import React, { useRef } from "react"; | ||
| import { | ||
| FileUploaderRegular, | ||
| UploadCtxProvider | ||
| } from "@uploadcare/react-uploader"; | ||
| const uploaderRef = useRef<InstanceType<UploadCtxProvider> | null>(null); | ||
| <FileUploaderRegular refUploadCtxProvider={uploaderRef} pubkey="YOUR_PUBLIC_KEY"/>; | ||
| ``` | ||
| ## Events | ||
| Events in React Uploader are the same as in blocks, see the [documentation][uc-docs-events]. | ||
| The principle of converting events from blocks to React Uploader: | ||
| 1. All events in React Uploader start with `on`. | ||
| 2. All events in React Uploader in `camelCase`. | ||
| Example: | ||
| ```jsx | ||
| import { FileUploaderRegular } from "@uploadcare/react-uploader"; | ||
| <FileUploaderRegular | ||
| pubkey="YOUR_PUBLIC_KEY" | ||
| onModalOpen={() => { | ||
| console.log('modal-open') | ||
| }} | ||
| /> | ||
| ``` | ||
| ### Table of events | ||
| | Events blocks | Events React Uploader | | ||
| |------------------------|------------------------| | ||
| | file-added | onFileAdded | | ||
| | file-removed | onFileRemoved | | ||
| | file-upload-start | onFileUploadStart | | ||
| | file-upload-progress | onFileUploadProgress | | ||
| | file-upload-success | onFileUploadSuccess | | ||
| | file-upload-failed | onFileUploadFailed | | ||
| | file-url-changed | onFileUrlChanged | | ||
| | modal-open | onModalOpen | | ||
| | modal-close | onModalClose | | ||
| | done-click | onDoneClick | | ||
| | upload-click | onUploadClick | | ||
| | activity-change | onActivityChange | | ||
| | common-upload-start | onCommonUploadStart | | ||
| | common-upload-progress | onCommonUploadProgress | | ||
| | common-upload-success | onCommonUploadSuccess | | ||
| | common-upload-failed | onCommonUploadFailed | | ||
| | change | onChange | | ||
| | group-created | onGroupCreated | | ||
| ## Security issues | ||
@@ -54,6 +114,10 @@ | ||
| [badge-stack-img]: https://img.shields.io/badge/tech-stack-0690fa.svg?style=flat | ||
| [badge-stack-url]: https://stackshare.io/uploadcare/stacks/ | ||
| [badge-release-img]: https://img.shields.io/github/release/uploadcare/react-components.svg | ||
| [badge-release-url]: https://github.com/uploadcare/react-components/releases | ||
| [npm-img]: http://img.shields.io/npm/v/@uploadcare/react-uploader.svg | ||
| [npm-url]: https://www.npmjs.com/package/@uploadcare/react-uploader | ||
| [badge-build]: https://github.com/uploadcare/react-components/actions/workflows/checks.yml/badge.svg | ||
| [build-url]: https://github.com/uploadcare/react-components/actions/workflows/checks.yml | ||
| [uc-docs-metadata]: https://uploadcare.com/api-refs/rest-api/v0.7.0/#tag/File-Metadata | ||
| [uc-docs-events]: https://uploadcare.com/docs/file-uploader/events/ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
No alert changes
Improved metrics
- Total package byte prevSize
528128
0.51%- Lines of code
10575
0.18%- Number of lines in readme file
121
112.28%No dependency changes