A React Native library for rendering DatoCMS Structured Text (DAST) with full TypeScript support and customizable styles
npm install react-native-dastA React Native library for rendering DatoCMS Structured Text (DAST) with full TypeScript support and customizable styles.
- โ
Full DAST Support - Renders all DatoCMS Structured Text node types
- ๐จ Fully Customizable - Override any style for complete control over appearance
- ๐ TypeScript First - Written in TypeScript with comprehensive type definitions
- ๐งช Well Tested - Comprehensive test coverage
- ๐ Custom Renderers - Support for custom link, block, and inline item renderers
- ๐ฑ React Native Only - Uses only React Native components (Text, View, etc.)
- ๐ Expo Compatible - Works seamlessly with Expo
``sh`
npm install react-native-dastor
yarn add react-native-dast
`tsx
import { StructuredText } from 'react-native-dast';
const data = {
type: 'root',
children: [
{
type: 'paragraph',
children: [
{ type: 'span', value: 'Hello ' },
{ type: 'span', marks: ['strong'], value: 'world' },
{ type: 'span', value: '!' }
]
}
]
};
function App() {
return
}
`
You can customize any style by passing a customStyles prop:
`tsx
customStyles={{
// Paragraph styles
paragraphText: {
fontSize: 18,
lineHeight: 28,
color: '#333',
},
// Heading styles
heading1Text: {
fontSize: 36,
fontWeight: 'bold',
color: '#000',
},
// Text marks
strong: {
fontWeight: '700',
color: '#e74c3c',
},
emphasis: {
fontStyle: 'italic',
color: '#3498db',
},
// List styles
listItemText: {
fontSize: 16,
lineHeight: 26,
},
// Link styles
link: {
color: '#3498db',
textDecorationLine: 'underline',
},
// Code block styles
codeBlockText: {
fontFamily: 'Courier',
fontSize: 14,
},
}}
/>
`
`tsx`
onLinkPress={(url) => {
// Handle link press
console.log('Link pressed:', url);
// You can use Linking, navigation, etc.
}}
/>
`tsx
// Custom renderer for DatoCMS blocks
renderBlock={(blockId) => {
return
}}
// Custom renderer for inline items
renderInlineItem={(itemId) => {
return
}}
// Custom handler for item links
onItemLinkPress={(itemId) => {
console.log('Item link pressed:', itemId);
}}
/>
`
| Prop | Type | Description |
|------|------|-------------|
| data | DastDocument | The DAST document to render (required) |customStyles
| | Partial | Custom styles to override defaults |style
| | ViewStyle | Container style for the root view |onLinkPress
| | (url: string) => void | Custom link press handler |onItemLinkPress
| | (itemId: string) => void | Custom item link press handler |renderBlock
| | (blockId: string) => ReactNode | Custom renderer for block items |renderInlineItem
| | (itemId: string) => ReactNode | Custom renderer for inline items |
See src/styles.ts for all available style keys. Key categories include:
- paragraph, paragraphTextheading1
- through heading6, heading1Text through heading6Textlist
- , orderedList, unorderedList, listItem, listItemText, listItemBullet, listItemNumbercodeBlock
- , codeBlockTextblockquote
- , blockquoteText, blockquoteAttributionthematicBreak
- strong
- , emphasis, code, underline, strikethrough, highlightlink
-
The library is written in TypeScript and exports all types:
`tsx``
import type {
DastDocument,
DastNode,
Paragraph,
Heading,
StructuredTextStyles,
// ... and more
} from 'react-native-dast';
Check out the example folder for a complete working example with Expo.
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
---
Made with create-react-native-library