You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

react-alphabet-list

Package Overview
Dependencies
1
Maintainers
1
Versions
10
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-alphabet-list

[![NPM](https://nodei.co/npm/react-alphabet-list.png?mini=true)](https://npmjs.org/package/react-alphabet-list)


Version published
Weekly downloads
303
increased by30.04%
Maintainers
1
Created
Weekly downloads
 

Readme

Source

React-Alphabet-List(in-Dev)

NPM

Preview

¶Demo

Alphabet-List-Demo On CodeSandBox

¶Props

PropsTypeDescription
data (required)ArrayAn array of strings or objects. When it's an array of object, specify the name key of item in nameKey
nameKeyStringA string that tells the name key of one item, undefined if data is string array
styleObjectA style object. Styles for the container
alphabetListStyleObjectA style object. Styles for the container of the alphabet list navigation on the right.
alphabetItemStyleObjectA style object. Styles for each alphabet in the alphabet list navigation
generateFn (required)FunctionA function that takes each item sent in the data array and returns the html to display

¶Usage

const data = ["anything"];

if array of object is to be used

const data = [{ name: "anything" }];
const nameKey = "name";
<AlphabetList
  data={data}
  nameKey={nameKey}
  style={{}}
  alphabetListStyle={{}}
  alphabetItemStyle={{}}
  generateFn={(item, index) => {
    return <div key={item}>{item}</div>;
  }}
/>

This Project is Under The MIT License

FAQs

Package last updated on 12 Sep 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc