1.0.8 • Published 2 years ago
@meplay/react v1.0.8
@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/reactTable of content
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} />;
};