I am working on react swipe button. By default it shows "unlocked" on button. I am using react swipe button yarn package . How can I change the text "unlocked" to "Completed"?
I took a look at the source code, and it seems like there's a text_unlocked prop you can pass to the component.
<ReactSwipeButton
...
text_unlocked='Completed'
/>
Note that it doesn't seem to be listed as part of the official documentation, so you may run into problems if the developer did not intend to expose this property.
Related
I have created a React Application and copied navbar from bootstrap component. I also added cdn files at index.html file. Also changed changed class to className but still but when run I get error with failed to compile and cursor is placed on data-toggle="colapse". upon removing this line it moves to next one. but its not working. .
working with bootstrap in react is not simple, it is easier to use React-bootstrap.
https://react-bootstrap.github.io/
you then just download the npm package and import the buttons and other options you want.
If you want to go about doing it this way, then you would need to use <button className="bootstrapclass">hello</button>
or specifically
<button className="btn btn-secondary">hello</button>
outside of that, there is no way to use bootstrap.
it is advisable that you share your code, so people can see what the mistake is.
The error was because of attaching cdn at outside the body. I resolved this by placing cdn of CSS and JS at just before the closing body tag.
I have been having some trouble getting the Material-UI expansion panels on my React application to expand once the "expand more" icon has been clicked. I have used the documentation on the Material UI website and set up the react application using npx create-react-app. Below I have attached the code of my component and my package.json. The website displays the panel with the correctly mapped data, but the panel does not expand once clicked. Through some research I read that the latest MacOS update has been having some bugs with css frameworks and animation. Has anyone else experienced this issue? I'm not sure at this point what is causing the error.
package.json
component imports and styling
website display
component render
I think you need to change the onClick props in <ExpansionPanel /> for onChange.
But i have a problem like
Context
New electron user here. I just cloned and installed the recommended React + Electron repo: https://github.com/electron-react-boilerplate/electron-react-boilerplate
Now I want to use Material-UI. So I thought I just follow the instructions here:
https://material-ui.com/getting-started/installation/
After I did this, the app doesn't show me anything from Material-UI. I created a Component with a simple App Bar. But it does show nothing.
So I found out that there is another package.json in the folder /app/package.json
I cd'd into it and redid the installation. Restart the dev server but still nothing shows up (no appbar, just white screen).
Here is a screenshot:
Also according to the docs I should add a link for the roboto font to the html file. Where is this supposed to go? I put it into the only html file I found in app/app.html.
How can one set up Material-UI with Electron or rather this specific boilerplate?
I couldn't find anything up to date for this question.
I found the error. Turns out I imported MenuIcon but material doesn't export it. So when I get rid of it, the appbar renders correctly.
While working on SpeedDial component of React's Material UI the following is needed:
Change the background color of speeddial button
Change the background color of speeddialactions
Change the font size of tooltip displayed on hover over speeddialactions
All this was done successfully earlier with the following dependencies at sandbox URL for working code
- material-ui/core 4.1.3
- material-ui/lab 4.0.0.alpha.18
But now with latest packages I have updated code posted here sandbox URL for semi working code where things are getting bumpy
- material-ui/core 4.6.0
- material-ui/lab 4.0.0.alpha.31
when hovered over speeddialaction there is an error that causes the SpeedDial to disappear. Error details can be seen in the console of sandbox URL for semi working code
This was a bug after I reported to material-ui community and has been fixed in alpha 32 release.Refer at Issue and solution posted here
Just experimenting with antd's React based UI kit, however it seems that some of the input components not rendering as they should, ex. as a dropdown.
Please see below a random component and how it's being rendered (I added 2 components within mine, TimePicker and DatePicker to demonstrate this)
Looking through the docs I understood that these input or form components must be wrapped within < Form > and < Form.Item >, I tried with and without these.
I also tried both with and without providing default props, still nothing, the documentation doesn't mention these as mandatory ones.
render() {
return (
<div>
<Form>
<Form.Item>
<TimePicker/>
<DatePicker/>
</Form.Item>
</Form>
</div>
);
}
actual: [actual render][1]
expected: https://ant.design/components/time-picker
Thanks guys!
update: I created a new react app on my work mac using npx create-react-app (yesterday I used my personal windows) and had npm i antd. I made sure I have nothing in the new app which could cause issue, only the boilerplate, then I added a component exactly how it is in the ant design documentation.
I am still experiencing the same issue. Sure it's missing something fundamental within ant-design but it seems it's not in the documentation. Anyone who ever used the ant-design components with react, have you done anything specific apart from installing the package and importing the components before using?
It looks like it disregards the css.
In case if anyone else is experiencing this, found the solution:
Antd's css was not applied because I forgot to import it to my App.css:
#import '~antd/dist/antd.css';
Simple mistake to make.
Solution was found in the below link:
https://github.com/ant-design/babel-plugin-import/issues/89
mthrsj also asked about this, I overlooked it when I checked.