Nukem's Possible Manifestation

    @jsamr/react-native-li
    TypeScript icon, indicating that this package has built-in type declarations

    2.3.0 • Public • Published

    @jsamr/react-native-li

    npm semver codecov CI DL/month

    A pure-JavaScript React Native component to render CSS3 compliant ordered and unordered lists.

    Supports more than 4 dozens numeric, alphabetic, symbolic and additive presets, including
    Arabic (numeric), Persian, Thai, Hebrew, Roman, Katana, Latin, disk, circle, square...
    All presets can be easily extended (add prefix, suffix).
    Plus, it has premium RTL support 🚀


    npm add --save @jsamr/react-native-li @jsamr/counter-style
    yarn add @jsamr/react-native-li @jsamr/counter-style

    Introduction

    You must provide a counter style renderer from @jsamr/counter-style library to the counterRenderer prop of MarkedList component. This library exports dozens of presets as individual modules (see examples below) and also provides an easy API to create custom counter styles. Check the docs here.

    MarkedList will render every children as a list item (li). If you want to render items in a different container, you should instead use MarkedListItem in combination with useMarkedList. The latter takes exactly the same props as MarkedListItem + a length prop corresponding to the number of list items to render. It returns base props for the MarkedListItem component.

    The full API including components props is available here.

    Examples

    Lower Latin

    import React from 'react';
    import { ScrollView, StyleSheet, Text } from 'react-native';
    import lowerLatin from '@jsamr/counter-style/presets/lowerLatin';
    import MarkedList from '@jsamr/react-native-li';
    
    export default function App() {
      return (
        <ScrollView style={{ flexGrow: 1 }}>
          <MarkedList counterRenderer={lowerLatin}>
            {[...Array(100).keys()].map((index) => (
              <Text key={index} style={{ flexShrink: 1 }}>
                The World Wide Web Consortium (W3C)
                develops international standards
                for the web and HTML, CSS, and more.
              </Text>
            ))}
          </MarkedList>
        </ScrollView>
      );
    }
    Show rendered 🖼

    Disc

    import React from 'react';
    import { ScrollView, StyleSheet, Text } from 'react-native';
    import disc from '@jsamr/counter-style/presets/disc';
    import MarkedList from '@jsamr/react-native-li';
    
    export default function App() {
      return (
        <ScrollView style={{ flexGrow: 1 }}>
          <MarkedList counterRenderer={disc}>
            {[...Array(100).keys()].map((index) => (
              <Text key={index} style={{ flexShrink: 1 }}>
                The World Wide Web Consortium (W3C)
                develops international standards
                for the web and HTML, CSS, and more.
              </Text>
            ))}
          </MarkedList>
        </ScrollView>
      );
    }
    Show rendered 🖼

    Arabic + RTL

    import React from 'react';
    import { ScrollView, StyleSheet, Text } from 'react-native';
    import arabicIndic from '@jsamr/counter-style/presets/arabicIndic';
    import MarkedList from '@jsamr/react-native-li';
    
    export default function App() {
      return (
        <ScrollView style={{ flexGrow: 1 }}>
          <MarkedList
            counterRenderer={arabicIndic}
            rtlLineReversed
            rtlMarkerReversed>
            {[...Array(100).keys()].map((index) => (
              <Text key={index} style={{ flexShrink: 1 }}>
                يقوم اتحاد شبكة الويب العالمية
                (W3C) بتطوير معايير دولية للويب و
                HTML و CSS وغير ذلك الكثير.
              </Text>
            ))}
          </MarkedList>
        </ScrollView>
      );
    }
    Show rendered 🖼

    Disc + RTL

    import React from 'react';
    import { ScrollView, StyleSheet, Text } from 'react-native';
    import disc from '@jsamr/counter-style/presets/disc';
    import MarkedList from '@jsamr/react-native-li';
    
    export default function App() {
      return (
        <ScrollView style={{ flexGrow: 1 }}>
          <MarkedList counterRenderer={disc} rtlLineReversed rtlMarkerReversed>
            {[...Array(100).keys()].map((index) => (
              <Text key={index} style={{ flexShrink: 1 }}>
                يقوم اتحاد شبكة الويب العالمية
                (W3C) بتطوير معايير دولية للويب و
                HTML و CSS وغير ذلك الكثير.
              </Text>
            ))}
          </MarkedList>
        </ScrollView>
      );
    }
    Show rendered 🖼

    API Reference

    See autogenerated docs here.

    FAQ

    Marker box width is too wide, how can I change it?

    Width is approximated with the maximum marker string length in range, but letter widths may vary a lot depending on font and scripts. Use computeMarkerBoxWidth prop to customize width, or use markerStyle to override width.

    What to do when text in list items overflows?

    Don't forget to add flexShrink: 1 to your Text element.

    How to extend a preset, such as changing the prefix or suffix?

    That's really stunningly easy:

    import arabicIndic from '@jsamr/counter-style/presets/arabicIndic';
    
    const myCustomArabicIndic = arabicIndic.withPrefix('(').withSuffix(')');
    
    // Expect comes from jest testing framework.
    // Just a showcase of expected returned values.
    expect(myCustomArabicIndic.renderMarker(78)).toBe('(٧٨)');

    How easy it is to create a custom counter renderer?

    That's really quite easy. Check @jsamr/counter-style examples section.

    Install

    npm i @jsamr/react-native-li

    DownloadsWeekly Downloads

    28,675

    Version

    2.3.0

    License

    MIT

    Unpacked Size

    114 kB

    Total Files

    72

    Last publish

    Collaborators

    • jsamr