I understand how export data from react app and download it loke exel but how import data from exel to react app, into table?
maybe some good library exist?
If made a great experience with the 'xlsx' npm library.
Please remember to avoid reading empty lines/ rows with the option: blankrows.
Example line: xlsx.utils.sheet_to_json(ws, {header:1, blankrows: false, defval: '' });
Related
I would like to use the Authenticator component from Amplify UI for sign in in my React App but doing so makes my apps bundle size huge; it is currently 3Mb. I have seen the discussion on reducing bundle size for Amplify more broadly which led to this release/blog which I have followed. I am wondering if there is something similar I should be doing to import the Authenticator from Amplify UI in such a way that it does not import the entire ui-react library because it seems that is adding 1.8Mb to my app, most of which is coming from icons if I'm reading the chart right. I import the Authenticator as shown below:
import { Authenticator } from '#aws-amplify/ui-react';
import '#aws-amplify/ui-react/styles.css';
Here is my source map for the app:
package.json looks like this:
Prior to version 2.12.0 we had some treeshaking issues in the #aws-amplify/ui-react package which prevented the icons from being removed. This was fixed in version 2.12.0. See CHANGELOG. It looks like you may be using 2.10.4. Can you make sure you are on the latest version?
npm install #aws-amplify/ui-react#latest
If you don't see a reduction in bundle size after upgrading the latest version that's a bug, and we would like to get it fixed. You can either respond to this issue or even better would be to open a bug here.
The Authenticator component does not import anything from its parent directories, so you could probably just extract the code from here and install any dependencies that are missing.
I am using a boilerplate Ignite Bowser and I am trying to add Knob Addon to storybook, but so far I cant make it to work.
On the story, I added a decorator like the following code:
storiesOf("Button", module)
.addDecorator(fn => {fn()})
.addDecorator(withKnobs)
However, when trying to add: "#storybook/addon-knobs/register" Im failing at it.
Some help would be nice.
Thanks
Project Overview
When running on React Native you need to install knobs from the on-device
Create a file named ./rn-addons.ts
Add the following import on the file:
import '#storybook/addon-ondevice-knobs/register'
Then in your file storybook.ts, you import that rn-addons:
import './rn-addons'
I created an codepen with react code and I'm importing its libraries trough CDN.
Now I want to implement this code (working) into my react project.
But first It could be handy to put all code into a react sandbox so I can make changes before deploying to my code.
I tried to copy paste all code into a sandbox and add all libraries (react, react-dnd, reactdndhtml5backend, react-dom), but it still gives me a lot of errors.
Also the files in my own project are .tsx and not .js.
My current codepen is found here: https://codepen.io/darkinfore/pen/daJxyP
This works, but just not when I implement this into a react sandbox.
I also tried to implement this into a react sandbox: https://codesandbox.io/s/w01l077w1w
But as you can see it gives me some strange errors.
Can someone help me with converting this codepen into a react sandbox without errors?
I looked over your codesandbox and then forked it here. Actually, the only error encountered had to do with ReactDnD not being defined (such that DropTarget could not be found). This was due to your import statement near the top of index.js:
import ReactDnD from "react-dnd";
Because of the way the react-dnd package is designed, this way of importing will not work for you. The package has multiple exports (for example, DragDropContext and DropTarget) rather than a single, default export. You need to take all of these exports and import them together into a single named import, called ReactDnD. So, what you need to do is:
import * as ReactDnD from "react-dnd";
I did this in the forked codesandbox, and this got you past the TypeError and then displayed your table.
Helpful information:
Different ways to use import
Exported modules from react-dnd package
I've created a react application using create-react-app, and installed element-react as a dependency. I followed the instructions stated here to use internationalization -- specifically adding these lines of code to what I think is the entry file (App.js):
import { i18n } from 'element-react'
import locale from 'element-react/src/locale/lang/en'
i18n.use(locale);
Unfortunately, this doesn't work. The other approach stated is using webpack but I don't want to do that. How do I make internationalization work with element-react? What is the entry file in a react application?
Actually, it did work when I placed the il8n code in index.js. It just doesn't seem to work for tables when they don't have data. The workaround for that is to set the emptyText property of the Table component.
I'm trying to find a client-side computer-vision library that plays nicely with React. I've tried tracking.js and js-objectdetect but I can't import them into a standard React component without major efforts that are beyond my skills.
The problem with both these awesome libraries is that they are written as IIFE with no export statements e.g.
(function(){...})()
They are supposed to be imported as <script src = 'etc'> so I can't seem to just import them as normal and follow the API without getting
TypeError: foo.bah is not a constructor
I tried adding my own export statements but a can of worms exploded out of it!
Can anyone suggest a better approach?
If you are using webpack you can try exports-loader to allow you using import syntax.
Here is some more info.
Here is a working implementation of tracking.js with React (using create-react-app)
https://github.com/howardkitto/react-tracking
The solution was provided by https://github.com/gaearon, here... https://github.com/facebookincubator/create-react-app/issues/2958