I am using filestack-react package in my CRA app. I can't find any option to upload multiple files the same time. Documentation doesn't say much about it.
Any ideas?
I have solved this using a property called actionOptions within the React Filestack component. See reference here:
https://github.com/filestack/filestack-react (Scroll down to 'Props')
I have passed to this prop an object called "PickerOptions", which is setting the number of maximum files uploaded at once. By default the filepicker has this number set to 1, but you can change that using "maxFiles: number"
You can find available options for {PickerOptions} here:
https://filestack.github.io/filestack-js/interfaces/pickeroptions.html#maxfiles
So my code looks like this:
const PickerOptions = {
maxFiles: 15
};
<ReactFilestack
apikey={FILESTACK_API_KEY}
actionOptions={PickerOptions}
/>
Related
I am using this project for the react map: https://github.com/gabidavila/react-usa-map
Here is a live example: https://codesandbox.io/s/frosty-christian-9gzcjx
I have a similar react project but thought posting that example would be easier.
mapHandler = event => {
alert(event.target.dataset.name);
};
For this event handler, I would like to alert the full state name instead of the abbreviation.In my actual project, I am setting the state based on what the user clicks on and using that to dynamically filter a grid. Problem is that the items in the grid are full state names instead of abbreviations.
Any help would be great. Thanks!
You'd need to read their documentation and see if they support full names.
If they seem to only support abbreviations, you may need your own mappings.
What that means is, you may take the abbreviation from event.target.dataset.name and map it into an object that contains the full name. Something like this:
const stateMappings = { NY: 'New York', CA: 'California'}
You can add more to the object above.
Then we can do a lookup in the object like so:
alert(stateMappings[event.target.dataset.name]);
Full code:
mapHandler = event => {
alert(stateMappings[event.target.dataset.name]);
}
I am building an APP using React + chakra-ui and I am in the process of adding Cypress tests to it, but I am facing a blocker and I was wondering if anyone had faced a similar problem and that could help!
Problem:
The test I am trying to pass is to verify that my element contains a CSS property, however, the CSS was generated by Charkaui with their unique syntax (e.g --chakra-scale-x)
My test case is as follow
cy.get('MY_ELEMENT')
.should('be.visible')
.should('have.css', '--chakra-scale-y', 1);
This test gave me the error
expected '<div.css-o64oke>' to have CSS property '--chakra-scale-x'
even though I can see from inspect element that it does have the following property.
Does anyone know a solution or a workaround for this? Thanks in advance!
Edit:
--chakra-scale-y is a css variable, which will be applied (probably as a transform) by the browser css engine.
Take a look in the devtools Computed tab (unselect Show all to see just those applied). If a transform shows up, this is what you need to test for.
In the test use getComputedStyle to check the value identified above.
cy.get('MY_ELEMENT')
.then($el => {
const win = cy.state('window')
const styles = win.getComputedStyle($el[0])
const transform = styles.getPropertyValue('transform')
console.log(transform)
expect(transform).to.eq(...)
})
It looks like you need to check scaleY, this is from the chakra library
const transformTemplate = [
"rotate(var(--chakra-rotate, 0))",
"scaleX(var(--chakra-scale-x, 1))",
"scaleY(var(--chakra-scale-y, 1))",
"skewX(var(--chakra-skew-x, 0))",
"skewY(var(--chakra-skew-y, 0))",
]
I've added Snowpack 3 to my application and it works for JS/TS files as well as directly imported stylus files.
The file structure is similar to the following:
view.js:
import 'view-styles.styl'
export default function view() {
return (
<div className='example-view'>Hello World</div>
);
}
view-styles.styl
#require './colors.styl'
.example-view
background-color: $mainColor
colors.styl
$mainColor = #ff0000
The LiveReload/HMR works as expected when changing the directly imported stylus file. It does not work when changing anything in the colors.styl file. Changes in this file are only picked up once the view-styles.styl file is updated.
Is this a known limitation of Snowpack?
I would also be ok to trigger the update manually, as I have a way to identify these files using their filenames. I haven't found a way yet to trigger live reloads using Snowpack's JavaScript API. I was able to load the file using the SnowpackDevServer.loadUrl function, but that doesn't help either.
I was able to contribute this to the snowpack stylus plugin. The change was already integrated into the plugin: https://github.com/fansenze/snowpack-plugin-stylus
I am currently working on a React + Redux Project and wanted to use language messages to render an image.
The problem is that, because the image name is dynamic (because of the language switching), I can't use require(imageVar) to load the image.
What I currently am working with is this (this is inside of the render() function):
FormattedMessage {...messages.fullLogo}>
{
(fullLogo) => <Img src={require(`${fullLogo}`)} alt="Banner" />
}
</FormattedMessage>
This should theoretically load the image from the url (yes fullLogo is a full url to the image).
What I tried inside of src={} was:
require(`${fullLogo}`)
require(fullLogo)
require("" + fullLogo)
require(String(fullLogo))
require(fullLogo.toString())
Everytime I try one of these (except the 3rd one - gives me an fatal error) I get an "Could not Load Module './img/image.png'" error.
I guess this means, that the name does load but require somehow cannot access the variable.
However if i put the path directly into the require() function. It successfully loads the image.
I don't want this though. I want it to load it dynamically.
Maybe you guys have some experience with it.
Thanks in advance!
PS: If you need any extra code, let me know!
You can't dynamically require files by variable at runtime, since require happens before runtime, when you bundle your app together (e.g. using webpack).
Based on how the packager works, this isn't really possible with require.
Packaging happens once before runtime so those variables don't have values yet.
What do you mean by langage switching ? What does message.fullLogo contains ? If it contains an url, just use that url without require:
I have a Meteor app, all UI components are built with React. I use FlowRouter for routing.
Now I want to add analytics with Yandex.Metrika service.
I found this package for React: https://github.com/narkq/react-yandex-metrika
But I how I have to use it? For what reason do I need <YM /> component from this example?
import {Initializer as YM} from 'react-yandex-metrika';
// Use the initializer to add the script to your page somewhere.
var MyComponent = React.createClass({
render: function() {
return (
<div>
// SNIP
<YM />
// SNIP
</div>
);
}
});
And where should I initialize the tracker object? I read this:
// This is supposed to be executed only in browser and only once.
// Because of that, the most sensible place for this code is right after you javascript bundle.
ym.init([987654321]);
But what is javascript bundle and where should I place my im.init(id) code?
Actually all what I need is to have funsctions to send data to Metrika, such as hit (pageview analog rom ga), reachGoal and so on.
thank you for your answers!
For what reason do I need component from this example?
You need it to load metrika's main code
How metrika works:
webmaster (you) inserts small piece of js code (loader) to all pages. this code append async script with main code (it's a bit bigger than loader) and create instance of metrika object ('counter') - new Ya.Metrika(...params). Instance will be available in global variable named yaCounterXXXXX, where XXXXX is your counter's id.
So, <YM /> component is loader from previous paragraph.
Actually all what I need is to have funsctions to send data to
Metrika, such as hit (pageview analog rom ga), reachGoal and so on.
There is doc about that at the bottom of readme. But I don't see filter by counter id for that methods. Maybe I make a pr to add this functionality. In any case you can use global variable yaCounterXXXXX like this yaCounterXXXXX.hit(url, params) or yaCounterXXXXX.reachGoal(goalId, params)
I hope I helped you.