I am using Typescript and REACT and I want to utilize and wrap some custom html elements in my TSX. For example, I am using a library with a customer html element called ch5-button an it is used in a vanilla html file as such
<ch5-button class="shadow-pulse-button" type="default" shape="circle" label="" iconClass="fas fa-award">
</ch5-button>
I did a ton of searching, but seems like i am not even smart enough to get the search correct to find how to do this. I am not even sure if I have the correct import statement to get those elements -- the closest I got was :
declare var CrComLib: typeof import('#crestron/ch5-crcomlib');
...
const ch5Button = new CrComLib.Ch5Button();
console.log("ch5Button");
console.log(ch5Button);
The console.log display <ch5-button></ch5-button> soI have no idea if I am even on the right track to using this thing. The ch5Button is a class with a lot of methods that look pretty much like what an html element would have but I just dont know what to do with it and how to learn a method for using it. I found some sites that explain how to use observables and such but I am sketchy on if I am heading down the right path. I have attached am image of what some if the properties and methods of the ch5Button looks like in chrome debugger.
Can anyone point me in the right direction? I would create a REACT component that wraps this class and can use props to set the correct attributes etc.
I am very comfortable building REACT apps but admittedly, I am not an advanced developer with it yet but doing my best to learn.
Related
My code is in React & is quite extensive, so i have provided a codesandbox link: My transactions section of my "under construction" app: https://codesandbox.io/s/agitated-sea-96048. A Chegg expert had given me the code that renders what you'll see above my transaction cards (his ModalEdit, for now, was placed inside of the TransactionsLayout component--this is just so you can visualize, somewhat, of what i'm looking for).
i like the way that the edit does what my question is asking. however, i do not know how to make it work within the framework of my app, because my TransactionCard.jsx file is a function component without state. and, the expert's code is with state.
i have tried putting his code as a separate component & calling to it with the button onClick (line#69 on the TransactionsCard.jsx file). however, this doesn't work because i can't figure out 'how' to convert his code to work within the framework of the transactions' files.
I have an issue with my images in react. When i let the image render like this:
import road from '../../../../assets/images/icons/road.png';
<img src={road} />
It will work but i want it to be dynamic relying on the input of data.
So i tried it this way (where icon is refering to a data set resulting in road):
import road from '../../../../assets/images/icons/road.png';
...
render() {
const { place, date, icon, progress } = this.props.stage;
...
<img src={icon} />
So my guess is that there is an issue with referencing here. From my question you can understand that i am absolutely new to react. What i also noticed is that with the method above i will get an unused var error if i dont load this image. So for example i have a couple of these icons but depending on the data in the dataset it will only render a few. Which i find kind of messy.
I hope you can steer me towards the right direction. Kinda frustrating not being able to implement an image...
With this: Load images based on dynamic path in ReactJs
posted from Subham Khatri i was able to get the answer i desired.
<img src={require(`../../../../assets/images/icons/${icon}.png)`} />
As I understand you are trying to pass the image from this.props.stage. Did you first try console.log(icon). what do you see in the console window. First we need to know whether the data is being passed from props.
If you go to the React home page and add the attribute className='button' to the first example "A Simple Component" you should get this result:
(i.e. the div with "Hello Jane" now looks like a button)
If you also add the attribute is='super-nice-button' you should get this result:
(i.e. the button styling is gone)
Why you ask? Seems when you combine className with is react doesn't generate a class attribute on the resulting dom node instead it generates a classname (which obviously has no meaning for the browser). Watch the difference below.
With only the class attribute:
With both the class and the is attributes:
My question: Why does react generate classname and not class when using the is attribute on a react element (and essentially destroying all styling)?
(background: I'm using inline-styling (or Fela) and I like to use the is attribute to tag my divs/panels so I can easily see the flow of components when clicking "Inspect Element" without having to tab over to the "React devtools". I understand it's kind of a hack but is is a supported attribute in React and HTML and it's a nice short word :) )
This is likely related to this:
https://github.com/facebook/react/issues/4933
You'll need to set class instead of className if you're pretending it's a WebComponent.
Personally I'd go a different route, still have it processed like a React component, and do it in a different way, or just use the React devtools.
FWIW, this answer was researched on-the-fly. For future reference, here's the flow:
1) Verified behavior using a basic React JSX fiddle. Confirmed.
2) Searched for the is HTML attribute, which led here within first few links:
What is HTML "is" attribute?
3) Looking in the W3C docs I learned the name of what is is used for. Then I searched for "react components w3c custom elements" which led quickly to:
https://github.com/facebook/react/issues/4933
4) Verified using class instead of className on WebComponent-like DOM, same fiddle.
So from complete ignorance and some surprise I'd say I found the answer in about five minutes.
I'm brand new to both pouchdb and react. I found the react-pouchdb-changes module which seems exactly like what I want to be using.
However, the example code it provides is far too sparse - I'm really at a loss as to how it would be incorporated into a basic react application.
Can someone provide a more complete example usage with some basic explanations of what each piece does?
This module seems to be merely a wrapper for the changes method. You can get a live example here. The link comes right from the documentation.
If that's not enough info you can check out the API reference with examples and example responses.
It's up to you how you want react-pouchdb-changes to integrate with React. All it does is provide you with a component to put your onChange handler on. These parts of the code example are the relevant ones:
<PouchDBChanges
…
onChange={change => console.log(change) /* do something useful with the change here instead of just logging it! */}
>
{/* your <App> component here */}
</PouchDBChanges>
Just use the component in your JSX code (wrap your main component or any container component with it).
If you have difficulties with setting up a React example, try using create-react-app. You'll have a running React app within a few seconds. A good place to add your <PouchDBChanges> component would be src/App.js - just wrap the outermost <div> with the component.
I have a specific need to only make one input field in a form (legacy code) a react component. So, I wrap the input with a div and render into it the 'new' input field that needs some special behavior.
The problem arises because the input field is no longer editable. I try to type into it.. nothing. I narrowed it down to the following:
<input type="text" **data-reactid=".2.0.0.0.1.0.0.1.2.0"**
When I remove that "data-reactid....", by editing via console, it works.
So when I am using react to sub out one form input field with a react one, it doesn't work unless I manually remove that data-reactid..
Is there a workaround for this, or a reason why this is happening?
Well its just a data attribute written by react to help them render into the DOM more efficiently so it should have no real impact on a input element or any element (unless there is code or style explicitly disabling the input) - I realize that this is no real help - because it happens to you, but this is not typical of react apps with inputs or element with data-attributes.
But if its the only bit of react on the page then that id is a bit long and I would have expected something like ".0" or ".0.0" if its wrapped in a div that react controls.
The react-id is only used by the React engine to work out what elements of the DOM need to be re-written when there are changes to state or props in your components.
One thing I noticed is, typically there would be an ID or in react a ref that you applied to the input in order to interact with it (such as getting its value).
I include the mark-up from a simple entry box on the user login form of a working app, as you can see it's not significantly different from what you have and works on all browsers Windows and Mac down to IE8 included.. (but not any IE below 8) and you need various shims for getting it work on IE8.
<input class="username-text-field" id="user-id" type="text" data-reactid=".0.0.0.1.3.0.0.2">
If none of these apply or you have them covered then practicably here should be no reason why your input should be disabled. It should just act like any other input. Have tried just dropping you component onto a simple HTML page with only the input on it, just to debug through the component in isolation?
That said,
It does feel that loading the entire React engine and wiring up a component to allow a single input field is a little over-kill. I realize that you're trying not to have to recreate exactly the same functionality you already have in react again on the legacy form, but if your render function is not too onerous then maybe a simple bit of JavaScript or JQuery might be the answer as a one off in the legacy solution (rather than the hit for the library) - just a thought