How to develop a component that people love?

Tech 2023-05-22 11:31:53 Source: Network

() 2023-05-22 09:01 1~5 &AI ReactVue 1~5 1. TypeScript API API 2

() 2023-05-22 09:01

1~5 &AI

ReactVue

1~5

1. TypeScript API API

2. README Mock = link

3.VuexRedux

Interface

type Size = any; //  type Size = string; // type Size = "small" | "medium" | "large"; //

DOM

DOMDOMclassName classnames[1] clsx[2] className

export interface IProps {className?: string;  style?: React.CSSProperties;}

data-spm dom Props

export type CommonDomProps = {className?: string;  style?: React.CSSProperties;} & Record<`data-${string}`, string>// component.tsxexport interface IComponentProps extends CommonDomProps {  ...}// orexport type IComponentProps = CommonDomProps & {  ...}

1.export props

export type IListProps{/**   * Custom suffix element.   * Used to append element after list   */  suffix?: React.ReactNode;/**   * List column definition.   * This makes List acts like a Table, header depends on this property   * @default []   */  columns?: IColumn[];/**   * List dataSource.   * Used with renderRow   * @default []   */  dataSource?: Array<Record<string, any>>;}

jsdoc[3] vitdoc[4]DEMO API

AICopilot[5]

toolbar?: React.ReactNode; // List toolbar.//  Columns // defaultValue is "[]"  columns?: IColumns[];

string ReactNode

Input label props string label

export type IInputProps = {  label?: string; // }export type IInputProps = {  label?: React.ReactNode; // }

React ReactNode

export type IFormProps<T = string> = {  value?: T;  defaultValue?: T;  onChange?: (value: T, ...args) => void;};

value

export type IVisibleProps = {/**   * The visible state of the component.   * If you want to control the visible state of the component, you can use this property.   * @default false   */  visible?: boolean;/**   * The default visible state of the component.   * If you want to set the default visible state of the component, you can use this property.   * The component will be controlled by the visible property if it is set.   * @default false   */  defaultVisible?: boolean;/**   * Callback when the visible state of the component changes.   */  onVisibleChange?: (visible: boolean, ...args) => void;};

[6]

ahooks useControllableValue[7]

antd[8]/ fusion[9] Form

export type IFormProps = {/**   * Field name   */  name?: string;/**   * Field label   */  label?: ReactNode;/**   * The status of the field   */  state?: 'loading' | 'success' | 'error' | 'warning';/**   * Whether the field is disabled   * @default false   */  disabled?: boolean;/**   * Size of the field   */  size?: 'small' | 'medium' | 'large';/**   * The min value of the field   */  min?: number;/**   * The max value of the field   */  max?: number;};

export interface ISelection<T extends object = Record<string, any>> {/**   * The mode of selection   * @default 'multiple'   */  mode?: 'single' | 'multiple';/**   * The selected keys   */  selectedRowKeys?: string[];/**   * The default selected keys   */  defaultSelectedRowKeys?: string[];/**   * Max count of selected keys   */  maxSelection?: number;/**   * Whether take a snapshot of the selected records   * If true, the selected records will be stored in the state   */  keepSelected?: boolean;/**   * You can get the selected records by this function   */  getProps?: (record: T, index: number) => { disabled?: boolean; [key: string]: any };/**   * The callback when the selected keys changed   */  onChange?: (selectedRowKeys: string[], records?: Array<T>, ...args: any[]) => void;/**   * The callback when the selected records changed   * The difference between `onChange` is that this function will return the single record   */  onSelect?: (selected: boolean, record: T, records: Array<T>, ...args: any[]) => void;/**   * The callback when the selected all records   */  onSelectAll?: (selected: boolean, keys: string[], records: Array<T>, ...args: any[]) => void;}

Merlion UI - useSelection[10]

value mode

Select

mode="single" -> value: string | numbermode="multiple" -> value: string[] | number[]

value

Merlion UI - useCheckControllableValue[11]

url API

export type IAsyncProps {  requestUrl?: string;  extParams?: any;}

API API

export type IAsyncProps {  requestUrl?: string;  extParams?: any;  beforeUpload?: (res: any) => any  format?: (res: any) => any}

23API

API Promise

export type ProductList = {  total: number;  list: Array<{    id: string;    name: string;    image: string;    ...  }>}export type AsyncGetProductList = (  pageInfo: { current: number; pageSize: number },  searchParams: { name: string; id: string; },) => Promise<ProductList>;export type IComponentProps = {/**   * The service to get product list   */  loadProduct?: AsyncGetProductList;}

1 async

Hooks

Lazada UploaderUpload + Lazada Upload Service
Address Selector: Select + Address Service
Brand Selector: Select + Brand Service
...

React Hooks

export function Page() {const lzdUploadProps = useLzdUpload({ bu: 'seller' });return <Upload {...lzdUploadProps} />}

Consumer

Consumer

Expand

isExpand

export type IExpandProps = {  children?: (ctx: { isExpand: boolean }) => React.ReactNode;}

export function Page() {return (<Expand>      {({ isExpand }) => {        return isExpand ? <Table /> : <AnotherTable />;      }}</Expand>  );}

package.json

repository : npmjs.comnpm.alibaba-inc.commc.lazada.com

package.json mainmoduletypesexports package.json

{"name": "xxx-ui","version": "1.0.0","description": "Out-of-box UI solution for enterprise applications from B-side.","author": "[email protected]","exports": {".": {"import": "./dist/esm/index.js","require": "./dist/cjs/index.js"    }  },"main": "./dist/cjs/index.js","module": "./dist/esm/index.js","types": "./dist/cjs/index.d.ts","repository": {"type": "git","url": "[email protected]:yee94/xxx.git"  }}

README.md

DEMO

`antd` `react` `vue`

`ChatGPT`

[1]https://www.npmjs.com/package/classnames

[2]https://www.npmjs.com/package/clsx

[3]https://jsdoc.app/

[4]https://vitdocjs.github.io/

[5]https://github.com/features/copilot

[6]https://segmentfault.com/a/1190000040308582

[7]https://ahooks.js.org/hooks/use-controllable-value

[8]https://ant.design/

[9]https://github.com/alibaba-fusion/next

[10]https://mc.lazada.com/package/@ali/merlion-ui#/src/hooks/use-selection/README.md

[11]https://mc.lazada.com/package/@ali/merlion-ui#/src/hooks/use-selection/README.md

Disclaimer: The content of this article is sourced from the internet. The copyright of the text, images, and other materials belongs to the original author. The platform reprints the materials for the purpose of conveying more information. The content of the article is for reference and learning only, and should not be used for commercial purposes. If it infringes on your legitimate rights and interests, please contact us promptly and we will handle it as soon as possible! We respect copyright and are committed to protecting it. Thank you for sharing.(Email:[email protected])

Mobile advertising space rental

Tag: How to develop component that people love