@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).