@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 🚀

```sh npm add --save @jsamr/react-native-li @jsamr/counter-style ``` ```sh 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`](docs/react-native-li.markedlist.md) 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](https://github.com/jsamr/react-native-li/tree/master/packages/counter-style#readme). [`MarkedList`](docs/react-native-li.markedlist.md) will render every children as a list item (li). If you want to render items in a different container, you should instead use [`MarkedListItem`](docs/react-native-li.markedlistitem.md) in combination with [`useMarkedList`](docs/react-native-li.usemarkedlist.md). 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](./docs/react-native-li.md). ### Examples #### Lower Latin ```jsx 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 ( {[...Array(100).keys()].map((index) => ( The World Wide Web Consortium (W3C) develops international standards for the web and HTML, CSS, and more. ))} ); } ```

Show rendered 🖼

#### Disc ```jsx 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 ( {[...Array(100).keys()].map((index) => ( The World Wide Web Consortium (W3C) develops international standards for the web and HTML, CSS, and more. ))} ); } ```

Show rendered 🖼

#### Arabic + RTL ```jsx 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 ( {[...Array(100).keys()].map((index) => ( يقوم اتحاد شبكة الويب العالمية (W3C) بتطوير معايير دولية للويب و HTML و CSS وغير ذلك الكثير. ))} ); } ```

Show rendered 🖼

#### Disc + RTL ```jsx 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 ( {[...Array(100).keys()].map((index) => ( يقوم اتحاد شبكة الويب العالمية (W3C) بتطوير معايير دولية للويب و HTML و CSS وغير ذلك الكثير. ))} ); } ```

Show rendered 🖼

## API Reference [See autogenerated docs here](./docs/react-native-li.md). ## 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: ```js 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](https://github.com/jsamr/react-native-li/tree/master/packages/counter-style#custom-style-renderers).

c	File Name	Size	files	T	Date
zip	docs/	23326	29	---	2025-10-15 10:09:17
zip	lib/	54862	30	---	2025-07-03 11:57:37
zip	node_modules/	7772	1	---	2025-10-15 10:18:18
zip	src/	13945	8	---	2025-10-15 10:09:17
zip	types/	7267	2	---	2025-07-03 11:57:37
-	CHANGELOG.md	4311		md	2025-10-15 10:07:34
-	README.md	7236		md	2025-10-15 10:07:34
-	package.json	2935		json	2025-10-15 10:07:34

🌲 / linkwarden node_modules @jsamr react-native-li

control-panel