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.
Related
How do I or what is the alternative method to break this layout into react component? The code below is bootstrap 4 for simplicity and what I want to achieve is something like this https://codedthemes.com/demos/admin-templates/material-able/bootstrap/default/ where contents are dynamic which is actually consist of different components. So what I am showing here is the simplified HTML code of the actual thing but has a similar structure. The question here how do I break them into components with this HTML structure? Many thanks in advance and appreciate any helps. Thanks again.
<div class="wholepage">
<navbar>
</navbar>
<sidebar>
<dynamiccontent>
</dynamiccontent>
<sidebar>
</div>
What you are describing is one of the selling points of React - the ability to modularise bits of code into what React calls components.
To build something like what you have linked you would need to nest components.
Using the example you might have an app.js that looks something like this.
import React from 'react'
import graph1 from './components/graph1'
import graph2 from './components/graph2'
const app = () => {
return (
<div>
<graph1 key1="props data goes here"/>
<graph2 key1="props data goes here"/>
</div>
)
}
export default app;
graph1 and graph2 are seperate components that have been imported and then nested in the app component as shown below.
The key1 attributes in each component accept values/functions that are passed down to graph1 and graph2 components for further processing and/or display. This is what allows you to make the content dynamic.
What I've mentioned above is very rudimentary but I think answers your question. ReactJS is a massive topic and will take a lot of practice to get used to. is well documented and there is a lot of fantastic documentation, examples and discussion online such as:
React components
React Props
React Design Patterns
DISCLAIMER: Fairly new to react myself, just trying to share the knowledge :)
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.
This is brand new install - I have not put any transitions on the Alert component
To replicate the code it is simple
import React from "react";
import { Alert } from "reactstrap";
export const Index = () => {
return (
<div>
<Alert color='primary'>This is a primary alert — check it out!</Alert>
</div>
);
};
Error Msg: Please update the following components: Transition
How does one go about updating Transition or eliminating it all together?
In the event that someone comes here on after searching the question and is looking for insight this is it.
React strap (at the time of this post) uses the react-transition-group things fade in and out and menus slide up and down. After amalgamating the info on this subject here and on Github they are currently updating the library. I have finished the coding of that component by ignoring the warning.
It did not impede this iteration of that component. Happy Coding.
I have this same warning, and I fixed it changing in the index.js file, the value of <React.StrictMode> to <React.Fragment>.
Since this removes the warning, is not guaranteed that your can be bulletproof.
This issue was reported, and apparently fixed but I received the same error even with the updated source code. It's more than just the error as well - it can cause components to re-render
Here is one github thread from the reactstrap repo about this (but there are a number of them): https://github.com/reactstrap/reactstrap/issues/1340
There are a number of issues related to this warning though.
As best I can tell it has something to do with an item in Transition.js, and I think it may have to do with a this.context call when a component is 'entering'
But, the project I encountered this issue is the first React App I'm building, and I'm not quite ready to learn the Legacy Context API, so that's just my best guess and in the end I just opted for an alternative package.
I don't have the rep to put this in a comment, so the only answers I have are:
Report the issue to the reactstrap team and wait/assist with a fix
Use an alternative package
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 am using contentful to get markdown to a react component that uses react-markdown to parse the markdown
import ReactMarkdown from 'react-markdown';
<Markdown source={text} />
Would I like to do is to override the Renderer so instead of it rendering ## as an h2 render i can pass a custom component to override the default h2 type to my own h2 component. How can i do that and is there and examples?
One of the options to <ReactMarkdown> is renderers.
One of the common renderers handles headings. If you look at the default rendering you'll see this:
heading: function Heading(props) {
return createElement('h' + props.level, getCoreProps(props), props.children);
},
So pass in your own heading handler. Check the level inside, roughly:
function CustomHeading(props) {
if (props.level !== 2) {
return createElement(`h${props.level}`, getCoreProps(props), props.children);
}
return <MyCustomElement {...props} />
}
If you don't have access to the code that commonmark-react-renderer gives you in the context of your function (which you probably won't) then you'd also need to duplicate what createElement gives you (but it's simple).
Unrelated: I've never used <ReactMarkdown> (but will), but this took me about five minutes of research. I'm including my path to encourage others to dig into their own questions and hopefully give some insight into how such things can be researched.
The react-markdown home page
Scanned through the "Options" section to see if custom rendering was trivially supported
Found the renderers option, which sounded promising
Clicked the link provided in that option's docs
Saw that heading was one of those (which made sense; I'd expect a renderer for every major formatting that Markdown supports)
Opened up the src directory to see if the implementation was easy to find
There was only one file, so I opened it
Searched the page for "heading" and found it
Cut and pasted that code here
The ability to read docs and follow trails is really important.