I am using DropzoneArea:
import { DropzoneArea } from 'material-ui-dropzone';
which is based on react-dropzone.
Dropzone from:
import Dropzone from 'react-dropzone'
contains certain props, not exposed by DropzoneArea but available by Dropzone
For instance disabled.
I have several question regarding it:
When I create DropzoneArea component, is there a way to mark it as disabled?
Is there a way to pass original properties of Dropzone
And here is an original issue I try to solve, probably the solution is not the best one and there are alternatives:
When a user uploads a file to DropzoneArea, I can send it to the server via onChange handler. I'd like to disable the whole component, while server is processing a file, until we get a response back.
The DropzoneArea has the property dropzoneProps, which is an object that is being passed (as props) to the Dropzone:
<DropzoneArea
dropzoneProps={ { disabled: true} }
...
/>
Related
I am woking on localization for a react app, and for maintainability I want to define all localized text in separate files outside of the component. I have a localizationReducer which controls the selected locale - so far I've been able to work with useSelector and useDispatch hooks to interact with the reducer/store, but I'm wondering if I can subscribe to the store from a separate file which is not a react component. Here is an example of what I'm trying to do.
//Component which needs the localized text
import * as localizedText from "#localization/modules/fundsMovementTemplates"
<
<div>
<DropDown
extraClass={"localizationSelector"}
defaultValue={""}
value={localeFromStore}
listItems={localesDidNotLoad.current ? [localeOptions[0]] : localeOptions}
handleChange={(e) => updateLocale(e.target.value)}
/>
<span>{localizedText.pageTitle}</span>
</div>
//separate file with localized text
import translate from "#localization/translate"
import intl from "react-intl-universal"
export const titleText= translate(
intl,
"HOMEPAGE.labels.TITLETEXT.title",
initComplete,
"Page Title"
)
//Translate function that interacts with reducer
/*
This method wraps intl.get(), allowing for the loading of locale data asynchronously
(in LocalizationDropDown) and avoiding empty/null locale data errors/warnings.
Params (ALL REQUIRED):
1) intl: the instance of the react-intl-universal singleton
2) selector: the key of the locale value (e.g. 'RULE.title')
3) initComplete: boolean indicating the init status of the intl instance
4) defaultText: fallback in case the locale data doesn't load, etc.
*/
export const translate = (intl, selector, initComplete, defaultText) => {
if (initComplete) {
return intl.get(selector).defaultMessage(defaultText)
}
return defaultText
}
How can I subscribe a simple file like this to the store so I can import the localized text into another component?
Running Storybook I'd like to navigate to my component and play with Docs tab and check its behavior as I change control value for each property. I implemented a component Footer that could receive string | JSX.Element | React.FunctionComponent types (I'm using TypeScript along ReactJS).
Unfortunately, when I type <div>my jsx</div> inside control field, a red border comes up pointing error and doesn't update the component in the preview as expected.
This is the screen I'm trying to insert into control field:
In the .stories.js file I have at the end:
export const Default = Template.bind({});
Default.args = {
subscribe: "Replace me by the Subscribe component of Design System.",
brand: <figure>Put branding logo here!</figure>,
links: <div><div>first column of links</div><div>second column of links</div></div>,
bottom: "All rights reserved."
}
The Links text is the default value for link property (from the actual React component file). As the code and image above can show us, it seems the JSX argument passed on Default.args in .stories.js file is completely ignored.
I'd like to insert a JSX into control field of storybook playground and then get Footer component live updated with JSX component rendered in the preview. How can I achieve that?
I have a Search parent component and a SideBar child component, I am trying to get context in SideBar, but everytime it returns empty.
I followed the tutorial exactly like: https://itnext.io/manage-react-state-without-redux-a1d03403d360
but it never worked, anyone know what I did wrong?
Here is the codesandbox link to the project: https://codesandbox.io/s/vigilant-elion-3li7v
I wrote that article.
To solve your specific problem:
When using the HOC withStore you're injecting the prop store into the wrapped component: <WrappedComponent store={context}.
The value of the prop store is an object that contains 3 functions: get, set, and remove.
So, instead of printing it, you should use it. For example this.props.store.get("currentAlbums") or this.props.store.set("currentAlbums", [album1, album2]).
This example is forked by your code: https://codesandbox.io/s/nameless-wood-ycps6
However
Don't rewrite the article code, but use the library: https://www.npmjs.com/package/#spyna/react-store which is already packed, tested, and has more features.
An event better solution is to use this library: https://www.npmjs.com/package/react-context-hook. That is the new version of the one in that article.
This is an example of a sidebar that updates another component content: https://codesandbox.io/s/react-context-hook-sidebar-xxwkm
Be careful when using react context API
Using the React Context API to manage the global state of an application has some performance issues, because each time the context changes, every child component is updated.
So, I don't recommend using it for large projects.
The library https://www.npmjs.com/package/#spyna/react-store has this issue.
The library https://www.npmjs.com/package/react-context-hook does not.
You pass the store as a prop, so to access it, you need this.props.store in your SideBar.
Not this.state.store
Create a wrapping App component around Search and Sidebar:
const App = props => (
<div>
<Search />
<SideBar />
</div>
);
export default createStore(App);
Now you can manipulate state with set and get that you have available in child components Search and Sidebar.
In Search component you can have something like:
componentDidMount() {
this.props.store.set("showModal", this.state.showModal);
}
also wrapped with withStore(Search) ofc.
and in SideBar you can now call:
render() {
return (
<div>
{"Sidebar: this.state.store: ---> " +
JSON.stringify(this.props.store.get("showModal"))}
}
</div>
);
}
and you will get the output.
I need to destroy the dropzone component after file upload, not able to get the dropzone object to apply the dropzone.destroy() method.
To clear the dropzone, we need to get the dropzone object and use the dropzone.destroy() method. We need to first initialize a variable outside the complete component as:
var myDropzone;
To get the dropzone object we need to use the init event of the dropzone which gives us the dropzone object like below:
initCallback (dropzone) {
myDropzone = dropzone;
console.log("dropzone"+myDropzone);
}
const eventHandlers = {
addedfile: this.onDrop.bind(this),
removedfile: this.removeFile.bind(this),
init: this.initCallback.bind(this)
}
Then we can call the dropzone.destroy() method after our upload is completed like this:
myDropzone.destroy();
It will reset our files array to [] and remove the files from the view also.
I'm trying to isolate why React/Redux/Redux-Form is automatically converting my payload to a string, whenever I focus and blur a input field.
There must be some process that is interfering but I don't know how to troubleshoot.
I've tried using the ReduxDevTools Chrome Extension which basically outputs :
type(pin): "##redux-form/INITIALIZE"
▶meta(pin)
▶payload(pin)
Amount(pin): 2222
type(pin): "##redux-form/FOCUS"
▶meta(pin)
type(pin): "##redux-form/BLUR"
▶meta(pin)
touch(pin): true
payload(pin): "2222.00"
Do you need to use redux-form?
If your data can remain within the context of the component, it should.
Here is one option, provided you don't need your data in the global app state:
import React, { Component } from 'react';
import wrapStateHelpers from 'react-state-helpers';
class Example extends Component {
render() {
const { mut, values: { someNumber } } = this.props;
return (
<input
type='number'
value={someNumber}
onChange={mut('someNumber', parseInt)} />
);
}
}
export default wrapStateHelpers(Example);
This just provides an event handler and wrapping component that manages form state in the component-level-state and then passes that state as the values object in the props to your component.
Note the parseInt passed to mut. Input fields nearly always return a string, and react-state-helpers provides an api for data conversion (second parameter to mut can be any function)
Here is a link to the project / docs, if this
The answer in this case was painfully obvious in retrospect. I was using normalize to format the value using .toFixed(2) which unknown to me, always returns a string.