I'm using react-native and for a component I need to replace the default image of the SliderIOS component with a custom one. Is there any way of accomplishing this or should I create a custom slider component? (I don't have any experience in this.)
I have already tried embedding an image as a child of the slider as well as the vice-versa approach, however non of them have worked.
Looking at the source code for RCTSliderManager, we can see that it only exposes value, maximumValue, minimumValue, minimumTrackTintColor and maximumTrackTintColor. That means like it looks like you're out of luck. You could use the RCTSlider and RCTSliderManager files as a starting point for a custom component, or you could create a pull request to expose setThumbImage on UISlider.
I have created a pull request fixing this issue which hopefully gets accepted.
Related
Following on Dynamic tag name in jsx and React
I tried both suggested answer but both of them seems to not pass any props!!
(Here is a an example of this issue)[https://codesandbox.io/s/angry-torvalds-x7hcv?fontsize=14]
What am i doing wrong?
Here is another example which is not minimal like the one above, using React.createElement, which also doesn't work as it should and it seems its not passing any props
outputElement = React.createElement(
`${this.props.UI_Element.type}`,
{
...globalRequiredProperties,
...this.props.UI_Element.config
},
...UIChildren
)
In short my final goal is creating an imported component, dynamically only by having its type (or name you might say).
Update 01:
After constatnly looking i found an alternative way, this uses an array in which you map an string to the actuall component and then create a tag which uses the map to call the component
Here is an example
This seems to be working as it should but i still would like to avoid creating the map manually, meaning i still wish to only create the component only using string!, is there a way to do this?
I was looking for a way to not only dynamicly import a component but also create it dynamicly, but this could not be achieve how a dynamic tag was created, after looking for a while i came across a library which exatcly does this!!
The Library is called react-loadable
Here is an example
As you can see both the import, the component tag and everything else is created dynamicly just as i want it, hope this helps everyone else too.
I'm a Polymer novice, but I guess what the answer will be...
Recently I came across with this issue: I got to loop through a collection of elements (using dom-repeat) and display its contents. But every element has a unique display and bindings, making it almost impossible to display each element dynamically. The ideal scenario would be to load a different component for each display type, but it looks like there is no easy way to achieve this.
Some options I have been thinking of were the following:
Using dom-if but it would add crap to my resulting HTML.
Is there a dom-switch? If it were something like that and didn't leave empty template tags (as it would do with dom-if) it would be nice.
It's possible to load a component dynamically? Using something like this: <[[item.type]] item-configuration=[[item.configuration]]></[[item.type]]>
Any other ideas? I would really appreciate any ideas or solutions or at least a workaround for my issue.
TL;DR; you can't
Polymer (and Web Components in general I guess) are best when used in a declarative way. Out-of-the-box your best solution is dynamically creating elements and adding to DOM or messy use of dom-if.
(potential) OPTION 1
I guess you could fairly easily implement a dom-switch element to work like
<template-switch switch="[[some.value]]">
<template-case case="10">
<element-one></element-one>
</template-case>
<template-case case="20">
<element-two></element-two>
</template>
<template-default>
<element-one></element-one>
</template-default>
</dom-switch>
I wrote this off the top of my head. There are multiple ways to implement such an element. A crucial decision is whether to use <template> internally or not. In this plunk I've implemented such element without templates but simply using content distribution.
OPTION 2
There is also Polymer.Templatizer.
Faced with a similar issue of choosing element to render dynamically I created this Plunk as a proof of concept.
As you see, you extend the <template> element with custom rules, which match against a model. You then bind the matched template's nodes with the model using Polymer.Templatizer.
Thanks to Templatizer, you don't have to pollute your actual element with conditionals and still get full binding functionality.
I'm working on a more feature-complete solution. If you're interested I could move it to a separate repository and publish.
I need to create a component which will add preloader (image with semi-transparent background) to all components, which loading or fetching data from service. I have some routable blocks on page. And I need to show preloader over the block, which working in the moment. Which of events should I handle? And how to make it globaly? Thank you.
I think you could start by creating a custom directive for e.g <my-loader></my-loader> and in that component you could add your Preloader, images etc then by simply adding it to any of your component view by including it in directive[]. Hope this answers as the question itself is quite abstract , some snippet would definitely help.
I am brand new to React. Am using v0.13.3. I have a functioning page (index.html with link to external css file and external js file). All works great.
JS file contains exactly what is in the JavaScript pane of this JSFIDDLE. (Apologies the fiddle doesn't run, I can't figure out why console says Uncaught SyntaxError: Unexpected token <. I have /** #jsx React.DOM */ at the top, but anyway...it makes a chart.)
QUESTION: How can I get what is in
var data = [{"letter":"A","frequency":0.08167},"letter":"B","frequency":0.01492},{"letter":"C","frequency":0.02782},{"letter":"D","frequency":0.04253},...]
to come from an external JSON file instead? (I want the chart to update if the JSON file's contents change).
(I realize there is the option to use React to break all of the pieces of the d3 chart into separate components and do it that way instead of all of the d3 inside one function. But for now, I'd like it to remain this way - based on the conclusion of this article.)
So, it didn't work to use d3.json(path/to/file.js) inside function createChart. And I've tried what is in this tutorial under "Hook Up the Data Model" and "Fetching from the server", but I'm not having any luck. Also, looked at this article. I'm suspecting I need to do something else with componentDidMount and shouldComponentUpdate, but a bit baffled. Searched for other examples, but having trouble finding one like this. Thanks for any suggestions.
One issue with the code in your JSFiddle is your use of the shouldComponentUpdate function. As per https://facebook.github.io/react/docs/component-specs.html this should only return a boolean telling React whether to re-render and not try to update the DOM itself. For responding to updates to props you would probably use componentDidUpdate in this case.
Generally if you need to do anything asynchronous in a React component, it should happen in the componentDidMount function, so you're on the right path there.
On other I would try is in createChart() you have d3.select("body") - you could select the <div> that you pass in from React as the dom prop and append the <svg> directly there, which would be a much more appropriate way of using React (Components should be self-contained, so they wouldn't go around modifying the DOM outside of themselves. Try d3.select(dom).append('svg').
Hope this is helpful!
PS: I've had some good results using this Plunkr template to create React snippets: http://plnkr.co/edit/tpl:a3vkhunC1Na5BG6GY2Gf?p=preview
Since there is a distinct possibility that I'm doing something wrong, I'd like to describe what I'm attempting to accomplish, in case there is a better way of doing it.
Platform: Windows 8 app using Navigation Template for HTML5/WinJS.
I have a few PageControls that query for data and use d3.js to visualize the resultsets.
I have another PageControl(dashboard) that uses a WinJS.UI.ListView to provide links to those pages/graphs. Currently, I'm using some static images in the ListView. What I'm trying to do is access the graph pages and present a "smaller" version of the graph on the selection screen.
Some of the things I've tried:
- iFrames do not appear to scroll (and the results look pretty ugly).
- I haven't been able to figure out how to do a screen shot programatically (this would be the best option, because I could then use the same technique when sharing the graph using the sharing contract).
- I've tried doing a Page.render, but it only seems to work if I have the call to my draw() function somewhere within the html page. In other words, it doesn't appear the the ready() function is being called as part of render. So, I've moved the drawing code into the html (which I really do not like), and that seems to work OK.
What I'd like to do is to move the draw function back to the Page.define and call it from a one line script in the html (unless there is a better way), but I haven't been able to get the correct syntax figured out.
I'd appreciate any pointers on the syntax or advice on better ways to accomplish the task in general.
I would suggest just putting the drawing code in a separate .js file that you can reference from anywhere in your app. Set it up like the following:
WinJS.Namespace.define('My.App.Namespace', {
drawingFunction: function () {
//code goes here
}
});
Save that to a file called drawing.js and include it in your default.html. Then you can call My.App.Namespace.drawingFunction() from either html or javascript.