I'm not asking how to embed SVG file or image in React. I need a function of following type signature:
(source: string) => React.ReactNode
This function parse SVG source string and returns a React node. I really need this because I'm handling the output of Graphviz. And because I want to manipulate the resulting React node, dangerouslySetInnerHtml cannot meet my requirements.
Of course, I can parse the SVG source to SVGElement by DOMParser and then translate native SVGElement nodes into ReactElement. But this costs time. I wonder if anyone did this job before? I searched the whole Internet but gained nothing.
I don't know about performance. But maybe smth like https://github.com/egoist/svg-to-component or https://github.com/publitas/svg-to-react.
Related
I am trying to use Project Fluent to translate a webpage using React and SSR (in particular, Remix). The library allows for using markup in the translation texts, e.g.
hello = Hello, and <italic>welcome</italic>
However, the built-in parser uses the document object which is not availble on the server. In their docs, Project Fluent specifies that in this case it is possible to provider your own parser. This must be a function with the following signature:
(str: string) => Node[]
where Node is the default DOM Node interface.
As suggested by Fluent themselves, I have attempted to use cheerio to solve this, but I am unable to produce a function with the correct signature. This is the closest I have gotten this far:
import * as cheerio from 'cheerio';
function parseMarkup(str: string) {
return cheerio.load(str)._root.childNodes;
}
In particular, this solution is missing nodeName and textContent which are the only two properties strictly required by Fluent. I think the best solution would hovewer to implement a function which returns an array of proper Node-objects to avoid having to use // #ts-ignore.
Any help implementing a parser with the correct signature is greatly appreciated.
Does anyone know of a way to translate Word syntax into react-markdown?
I am releasing a website to a client who is not very practical with writing using markdown.
So i thought maybe he could write the descriptions to add to the website on a Word file and then convert it into a markdown style and easy peacy.
Also, i tried to replicate this kind of list:
List item
buy using either + or * or - but react-markdown doesn't recognise them.
Any idea on how to takle the issue?Any info are more than welcome. Many thanks
This might be a very particular use case but I have a React app which uses Victory Charts. I need to get a screenshot of the chart and export it as a png.
I have done some research and here are some ideas that I have so far:
Export it using some functionality within victory.js itself. The closest I could get is: https://github.com/FormidableLabs/victory/issues/781#event-1281057513 But this approach doesn't work. I've tested it. It gives me a reference to the Chart's container though which might be useful.
Use some 'screenshot' library I tried saveSvgAsPng and made this: https://codesandbox.io/s/victory-chart-to-png-k9zo8 But this doesn't work too and I can't figure out why not.
Use some sort of implementation using D3.js upon which victory charts is built. But I have no idea how to do that too.
If you guys have any idea about how this sort of thing can be done, please let me know.
In order to saveSvgAsPng to work, you have to pass an <SVG> element to it.
After reviewing your code at https://codesandbox.io/s/victory-chart-to-png-k9zo8, you evidently passed a Container element to it.
There this.state.ref refers to the Container element but not the <SVG> element. Change this.state.ref to this.state.ref.firstChild which refers to the <SVG> element in the container. And the library works like a charm in downloading the SVG as PNG.
I have an object that contains content for a page, I import it and try to use it like you'd use any object variable:
import {Variable} from 'data'
const message = defineMessages({
message: {
id: 'component.title',
defaultMessage: Variable.title
}
})
However, I get React Intl] Messages must be statically evaluate-able for extraction.. I googled a lot and found no solution to this. I'm using babel-plugin-react-intl to generate the locale files, and a contributor said that Babel can only parse simple statically messages
It's hard to believe there's no way to be able to import content from another file and have it translated. There must be a way, I couldn't come up with a solution and help would be appreciated.
I struggled with the same problem by myself. As far as I know, there's no way to translate a content of a variable in react-intl.
If you're interested in alternative solutions, I wrote jsLingui i18n library and recently just added support for noop translations, which is exactly what you're looking for.
If I try to define a textalign with justify value in reactjs native, I get the error message that only four values are supported: auto, left, right, center. Is it possible to work around this, and define textalign with justify? Below is the sample code:
var styleTest = StyleSheet.create({
title: {
fontSize : 20,
color : 'rgb(0,0,255)',
textAlign: "justify"
}
});
Just to clarify, I see this when trying out reactjs native for ios, not in reactjs.
The above error happens when calling StyleSheet.create method which calls StyleSheetValidation.validateStyle method. I guess in order to create a non-supported CSS property, I have to do a workaround and call CSS directly. I am curious how to go about including other stylesheet properties that are not supported, in a simple way. I couldn't find documentation on this. Pointers will be very much appreciated.
I have to do a workaround and call CSS directly
It's not actually CSS, it's a description of how it should look using the terms you know from CSS. The actual implementation does a bunch of math and then conveys it to UIKit in a way it understands, similar to how browsers implement CSS.
This has been done from scratch for react-native. It's not using an existing css engine.
I am curious how to go about including other stylesheet properties that are not supported, in a simple way
As you may have guessed by the words 'math' and 'UIKit', there's no simple way to do this, and absolutely no way to do it without modifying the objc code.
I suggest creating an issue or sending a pull request if it's missing something. Not all of CSS will be supported.
Disclaimer: Minimal iOS/react-native experience, I don't know what's required to add text justification. It may be simple.