I am using react-native-webview-quilljs to render formatted HTML text. It works fine on Android and iOS but it isn't supported on the Web (i.e. react-native-web/expo-web). So I managed to strip the HTML tags when rendering the formatted string on the browser (i.e. rendering non formatted text).
Then I got to realise that react-native-web actually uses React to render react-native components on the browser. And React has something as dangerouslySetInnerHTML that allows injecting HTML string to be rendered directly on the browser.
So, is there a way to use dangerouslySetInnerHTML from the react-native / expo project.
Upon close inspection I found that the html tags gets converted to the html entities while rendering on the browser. Take a look at the image below.
Solved it (would rather call it a workaround) by rendering a <div> with dangerouslySetInnerHTML prop when Platform.OS === 'web'.
Example:
Platform.OS === 'web'
? <div dangerouslySetInnerHTML={{ __html: Details }} />
: <View style={{flex: 1}}>
<WebViewQuillJS
backgroundColor={'transparent'}
content={Details}
isReadOnly
/>
</View>
Related
I am using Chakraui library for reactjs
I am saving the string version of the code into a database, then retrieving it and rendering to user. For demo I assign it to a variable. When I try to render it, it doesn't apply the component <Code/> which formats the text
const test = `text text <Code>text</Code>`;
<div dangerouslySetInnerHTML={{ __html: test }} />
How does react does this internally ?
How are routes complied into normal javascript ? (I have not seen any routing libraries in normal javascript)
JavaScript can be used to manipulate the URL and your local page history without reloading the page, which is the main idea behind how React Router works (see pushState). Combine this with the fact that you can selectively show / hide content with JavaScript and you have React Router. For example:
js (with some jQuery syntactic sugar)
function toggle() {
$('#blockOne').toggleClass('hidden');
$('#blockOne').toggleClass('visible');
$('#blockTwo').toggleClass('hidden');
$('#blockTwo').toggleClass('visible');
}
css
.hidden { display: none }
.visible { display: block }
html
<div id="blockOne">First content</div>
<div id="blockTwo" class="hidden">Second content</div>
<button onclick="toggle()">Toggle</button>
Clicking the button would cause the first and second block to toggle their visibility. Of course, there's a bit more complexity with React Router, but this is the basic idea. Browser history manipulation + showing / hiding content with JS.
I'm building a progressively enhanced React app which is completely server rendered (there is no JS bundle sent to the browser right now), sent down to the browser and then progressively enhanced using jQuery, inserted into the HTML by using <script dangerouslySetInnerHtml= {{ __html: // ES6 code }} />. However, Babel seems to be ignoring any ES6 inside these script tags, which is an issue as my application has to support some older browsers which has no support for ES6.
Here is an example of what I am doing:
class MyComponent extends Component {
const jsScript = `
// ES6 code like arrow functions, spread operator, destructuring etc
// It mainly uses jQuery to get the elements and work on them
`
render() {
return (
<div>
lots of content which will need progressive enhancement
<script dangerouslySetInnerHTML={{ __html: jsScript }} />
</div>
)
}
}
The ES6 inside jsScript is sent to the browser as ES6, not transpiled ES5, which is fine for newer browsers but fails on older browsers. How can I get Webpack/Babel to transpile it?
Also this is simply a prototype - eventually the code will be progressively enhanced in a lot more solid way but for now this works. Thanks!
I have this simple React JS + Redux app.
Decided to create a version of it using Onsen UI, I'm receiving no errors and there's output but the Onsen UI isn't rendered at all.
Here is the pic:
Here is my render function :
render() {
return (
<Ons.Page renderToolbar={this.renderToolbar}>
<Ons.List dataSource={this.props.listingData} renderRow={(listingData, index) => (
<Ons.ListItem tappable key={index} modifier='longdivider' >
<div className={'list' + listingData.location_id}>{listingData.location_id}</div>
<div>{listingData.location}</div>
<div>{listingData.description}</div>
</Ons.ListItem>)} />
<div><div onClick={this.stateToEntry} className="addButton">Add</div><div onClick={this.stateToEdit} className="editButton">Edit</div><div onClick={this.stateToDelete} className="deleteButton">Delete</div></div>
</Ons.Page>
);
}
Here is my renderToolbar function:
renderToolbar() {
return (
<Ons.Toolbar>
<div className='center'>My app</div>
<div className='right'>
<Ons.ToolbarButton /*onClick={}*/>
<Ons.Icon icon='md-more-vert' />
</Ons.ToolbarButton>
</div>
</Ons.Toolbar>
);
}
I've checked the modules are all imported, I also bind the functions in my constructor so it should work but why do I not have any UI?
PS: I'm using Onsen v2.0 & React-Onsenui 0.6.2
Anything I missed? Or is there something wrong in my code?
Unlike React native's way of styling its components Onsen UI has normal CSS files, which need to be included in order for it to work properly.
You can add them via link tags to the dom or if you're using webpack you can just require them.
The files should be something like
onsenui/dist/css/onsenui.css
onsenui/dist/css/onsen-css-components.css
You said you're not getting any errors in the console, so a lack of styles seems like the most likely cause.
Also if you're interested you can checkout the repo of a demo kitchensink app here.
And finally this may be a little off-topic, but you could try monaca cli as with it you can easily start from a working boilerplate.
I've been trying to view the imgur format gifv for a while but i just cant seem to get it working.
Been testing with img tags, video tags, iframes. So far only the iframe seems to work - but i cant resize the iframe due to browser limitations.
<img src="http://i.imgur.com/rCkPdZm.gifv" /> - nope
<video src="http://i.imgur.com/rCkPdZm.gifv"/> - nope
Any tips on how to display for example http://i.imgur.com/rCkPdZm.gifv
Thanks!
A gifv is not an image format, it's a made-up "extension" to make the landing page look like you have opened an image link directly, while being able to stream video instead of a much larger gif file. Use the "view source" option and go find out! :)
You can right-click on the gifv "image" and the browser should give you an option to "copy video url", which you can then use in a <video> element:
<video src="http://i.imgur.com/rCkPdZm.mp4" />
https://jsfiddle.net/xc4cqoh5/
In this context it doesn't matter if it's React or just plain HTML website, the solution is the same: you need to grab the URL of the actual video being played, not the gifv page that embeds it. It seems you can just replace the .gifv extension with .mp4. To make this answer relevant to the reactjs tag here's an example:
const Player = props => {
let videourl = props.videourl.replace('.gifv', '.mp4');
return <video src={ videourl } />;
};
ReactDOM.render( <Player videourl="http://i.imgur.com/rCkPdZm.gifv" />,
document.getElementById('container'));
http://jsfiddle.net/69z2wepo/47077/