How to target p paragraph elements
MartinConde opened this issue · 3 comments
I'm having trouble targeting the default p tags inside a Block. They are marked as span and as far as I can tell, based on the docs, I should be targeting those correctly. I'm obviously missing something though
The data:
"description": [
{
"_key": "0b71cdcbcc5a",
"_type": "block",
"children": [
{
"_key": "259de42897910",
"_type": "span",
"marks": [],
"text": "Some text to see if it works"
}
],
"markDefs": [],
"style": "normal"
}
]
The components (ended up trying whatever I could think of):
const components = {
block: {
span: ({ children }) => <Text>{children}</Text>,
bullet: ({ children }) => <Text>{children}</Text>,
p: ({ children }) => <Text>{children}</Text>,
},
list: {
bullet: ({ children }) => <View>{children}</View>,
number: ({ children }) => <Text>{children}</Text>
},
listItem: {
bullet: ({ children }) => <Text>{children}</Text>
},
marks: {
em: ({children}) => <Text>{children}</Text>,
span: ({children}) => <Text>{children}</Text>,
p: ({children}) => <Text>{children}</Text>,
},
};
Any ideas on where I'm going wrong here? It works just fine for Lists n stuff just somehow not the span / p tags
The only kinda alternative I found so far is using toPlainText
which works but kinda curious if there is another way
Hi Martin!
It should be block.normal
, eg:
const components = {
block: {
normal: ({ children }) => <Text>{children}</Text>,
}
};
The block
keys match the style
property of a block. However, if the block is a list item, they will use the listItem.<listType>
to render.
@rexxars I think it would help a lot to make the documentation a bit more clear in the github README file because I am sure it is a great library but just difficult to use it with the different elements. I have spend a lot of time figuring out how it works, and browsing closed pull requests.
A lot more people would use it if the documentation was more clear.
Thanks for the feedback, @davincios - would be happy to see a pull request improving the readme if you have time!