@meplay/react

A lib of a collection of some components created by me.

Installation

npm install @meplay/react

// or

yarn add @meplay/react

// or

pnpm add @meplay/react

Table of content

• CanvasIndex

CanvasIndex

An index component inspired by wechat contact.

Live Demos

see live

Props

prop	default	required	description
list	-	true	The letters to render
indexOptions	{width: 50,height: 300,font: 'bold 14px Arial',fillStyle: '#000'}	false	Options determine the width and height of the index canvas component, as well as the color and font of the letters rendered
effect	popup	false	base / wechat / popup / custom
durations	2000	false	Time to wait until the effect fades away(not working for custom effect)
activeColor	lightgreen	false	The active color on Index when click (not working for custom effect)
className	-	false	Classname for the canvasWrapper
emphasizeClassName	-	false	Classname for the emphasize div (only works for popup mode)
onClickLetter	-	false	Callback to get the clicked letter for custom mode only
onDrawIndex	-	false	Callback to emit the drawIndex class instance so that you can customize things

Usage

import { CanvasIndex, IndexEffect } from '@meplay/react';
import '@meplay/react/style.css';

const indexList = ['A', 'B', 'C'];

export const WebContactIndex: React.FC = () => {
  return <CanvasIndex effect={'wechat'} list={indexList} />;
};