I am using ag-grid for react and wanted to add my own props to the react component I am passing to fullWidthCellRendererFramework. Is there a way to do this?
Ok ag-grid provides a property called context from it's gridOptions. You can place both functions and props there.
Related
I want to add a feature to my Button component wherein I want to add an as prop just like in other component libraries to render different components based on the as value.
I am using React Ag-grid version 25.3.0. I am trying add a context menu with an action on hovering over a menu option. I am able to add a contextMenu following the example from here. But we don't have any callback available for hover action. Neither does the context menu(MenuItemDef) accept a JSX component as a menu option to add listeners.
Hence, would like to know if there are other options to add a custom component to the options.
Thanks in advance :)
In my REACT application, I'm trying to render a Component programmatically, but pasing to it any REACT context. Let me show you a simple example with this sandbox: https://codesandbox.io/s/kind-carson-u0hup?file=/src/App.tsx
As you can see, what I want to do is rendering <Dialog> programmatically when I click a button. But, inside that <Dialog>, I want to use any context created on the React Tree.
Unfortunately, I am aware that React.render does not pass any context, thus this cannot work: if you click on the button, you will see that, while the context in <InnerComponent> provides the value 'FooBar'. inside <Dialog> I have the default value 'initialValue'.
Thus, the question is, is there any way I can programmatically render a component, AND passing to its any kind of context?
I'm aware that React.createPortal does pass the context, but that method MUST be called inside the return statement of a component, while instead, in my case, I render the <Dialog> after a click on the Button.
Also, yes, I could always have the <Dialog> rendered, and use a prop isVisible.. But this is a simpler example.
I've read several things (some of these in the following links), but none of these really helped me:
https://github.com/facebook/react/issues/17974
Is it possible to pass context into a component instantiated with ReactDOM.render?
Why component rendered with ReactDOM.render loses react-redux context (Provider)
You can not put the render of component outside of your ContextProvider.
Check this link:
https://codesandbox.io/s/busy-curran-pbz6p?file=/src/App.tsx:0-834
I am using ag grid in one my react applications. I am initializing my grid in one of the components and saving the gridApi on a state variable by useState inside onGridReady method.
The thing is, I want to access gridApi from some other components also. What's the best practice for it? For example, I am initializing my grid in X component and I want to access gridApi from Y component also. Currently I am storing the gridApi on redux and retrieving it from store whenever it's needed from other components. Is there any other better way to do it? Also is there any pitfall of storing gridApi in redux?
Thank you.
Since you're using React, there's a few approaches you can use to access the gridApi from other components. All three approaches work well, depending on your needs.
Prop Drilling
Let's say you have a parent component which has a grid component and another component as children components. You can define a state variable on the parent component, and then provide a callback to the grid component to set the state when the grid is initialised. Now that you have the gridApi in the parent, you can share it with the other child component by passing it as props. You can find the implementation of this in a stackoverflow question I answered which has the solution.
Global state (Redux)
I can see that you're currently using this method.
Context / useContext
Similar to the Redux approach, but instead keeping the gridApi using React Context
I'm newly using Formik library for forms and I ran into problem. I'm not sure how can I handle state with array of objects from inside the component. I know about setValues and setFieldValue methods.. also about FieldArray but my target is to add newZone into newZones array when I click on add button and I don't want to render it. I want to customize rendering and place it under accordion.
sandbox here: https://codesandbox.io/s/rough-haze-zdlw9?file=/src/App.js
Will I need all custom handlers? Will I need to use local state inside component and then use setFieldValue to set state? Or can I somehow use FieldArray in there without rendering?
Thank you
You are using React-Bootstrap components instead Formik components, so you must manually assign handleChange and value props to every input component. You also have to call setFieldValue() when user clicks button Add.
Example:
https://codesandbox.io/s/quirky-leaf-tr3rv