@jsamr/react-native-li

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.