I just want to include material ui dialogs in my project. I do not want to include other components in my project. So I don't want to install full material ui just to use dialogs. Can anyone help with this?
https://material-ui.com/components/dialogs/
According to the documentation,
Tree-shaking of Material-UI works out of the box in modern frameworks. Material-UI exposes its full API on the top-level #material-ui import.
Which means importing exactly what you're using will not result into the inclusion of other parts of #material-ui/ in your production build.
Note all of their examples import only the bits used in that particular example, so figuring out what your project needs for each case should not be difficult. Besides, whenever you're missing something, you'll get a descriptive error message about it, telling you exactly what you missed.
Related
Is it possible to change/convert a plain react app into next app?
I have a project created with create react app but things have changed and now I want to switch the project into next app
maybe there's a possible way to do that? or should i start over from scratch to build my next app project?
I've been trying to research on how to migrate the project, but didn't found the solutions.
It's difficult to answer this question without seeing the actual project and dependencies you use, but here's a few considerations:
You'll need to convert your current routing solution to the one Next.js uses. Their routing is determined by the file system structure, rather than in code (like react-router). For more information, see their docs: https://nextjs.org/docs/routing/introduction
Ensure all your components and dependencies can render on the server, this may require moving behaviour that uses browser APIs into useEffect hooks (like window or document properties).
Move your hosting and building to something that supports Next.js configurations. There are a few including Vercel, Netlify & AWS.
Also check out their own migration guides that cover how to convert configurations to Next.js: https://nextjs.org/docs/migrating/incremental-adoption
In short, it really depends on what you're currently using and will require manual conversion your code. I hope this was still helpful.
Im trying to use the Twilio script tag for an international country list dropdown and I am following this twillio guide to do so. However, I got to a point where it is showing a step where I have to include a script in the html file( for me it is index.html which is react's root file) and use the element from the window object.
Here is the snippet in the guide:
The issue here is that this guide was made with regular html,css, and javascript in mind and not with React/JSX files in mind. Is there any way I can handle this in a react file? Here is the doc in case you guys need to take a look. Thanks!
https://www.twilio.com/blog/international-phone-number-input-html-javascript
Twilio developer evangelist here.
The intl-tel-input project was initially built for jQuery, though no longer depends on it. So it wasn't really written for React, though it might be possible to integrate it with some work.
However, there is a project that has reimplemented the intl-tel-input in React, it's called react-intl-tel-input and might be the thing you are looking for.
You can install it with
npm install react-intl-tel-input
And use it in your React project by importing the component and its CSS:
import IntlTelInput from 'react-intl-tel-input';
import 'react-intl-tel-input/dist/main.css';
Then using the <IntlTelInput> component:
<IntlTelInput
containerClassName="intl-tel-input"
inputClassName="form-control"
/>
See the npm project page for more details.
I have two modules in my angular website , one is "bootstrap" and another one is "ng-bootstarp".
Does both modules are required , or any one is needed?
I am planning to keep only "ng-bootstarp" 4.0.0.0 and to remove "bootstrap"
Is this fine?
Also let me know the steps to remove "Bootstrap" ?
Can i just go ahead and delete the bootstrap from the ng_module folder or do i need to use any commands?
Don't delete it unless it's causing issues, Bootstrap is intended to be installed alongside ng-bootstrap.
Bootstrap is supposed to be installed when using ng-bootstrap, because ng-bootstrap
relies on Bootstrap's CSS, but it replaces everything else that comes with Bootstrap, as you can see in their dependencies. The CSS is then set in your angular.json or imported into the main styles.css
That said, the non-CSS parts of Bootstrap are unused and could be deleted, but if you're using a package manger, e.g. NPM, this could cause issues when updating and you'll need to repeat this process each update.
As pointed out by #Eliseo, an alternative to using the normal Boostrap with everything included is to use bootstrap-only-css, which can be installed using NPM or Bower, details here. This isn't an official Boostrap distribution as far as I can tell, so keep that in mind.
TLDR: there's no good reason to delete Boostrap.
Angular Material is the official UI framework for Angular, and is maintained (aside from open-source contributors) by Google engineers.
The community is fantastic, the documentation is excellent, and all of the components and utilities are designed to be used with Angular specifically. The source is a case-study in how to write code the Angular way.
It is for the reasons outlined above that I picked AM to be our company’s preferred UI framework.
I haven’t used Bootstrap in a very long time and I would not consider using it in a new project now.
I've been trying to get jQuery datatables to work in a react component. My app doesn't use bootstrap but I want to use it for my tables so I've scoped bootstrap to a class so i can use it in a div without affecting the rest of the application.
I read the following article Integrating React and Datatables — not as hard as advertised, but the article presents a use case that is more basic than I think many jQuery datatables users use. npm datatables doesn't give you access to extensions (search, scroller, button functions, etc), and everything that comes without the extensions is easy enough that you might as well use an existing react table like primereact, react-table, griddle, react-data-grid, reactabular, fixed-data-table, or react-virtualized.
These offer many options but when tested, had at least 1 or more problems that prevented it from being easily adopted and use all the features needed. Some have issues i think I could help fix after I'm more seasoned with react, but I'm not there yet. I've used jQuery datatables in many production environments without any problems. It's a major sticking point moving to react.
So after weeks of searching and testing and trying to work through bugs, I'm back to trying to bring jQuery datatables into my react app. I realize it's not the "react way" but based on the react docs it's possible and there's a proper way to approach it. I don't need it to react with anything outside of its container or div i place it in.
Using the builder is the recommended way to download datatables so you can get your customized components. I'm also downloading rather than using the CDN because this is a local app and needs to work when there is LAN but no WAN access. I'm using create-react-app and I tried to download datatables from here to a folder in my project and had the following problems:
hot-reload started taking forever (>1min)
the page itself was moving at a crawl
extensions didn't seem to be working (could have been locked up?)
How do you use jQuery datatables in a react app while still being able to use the datatables extensions and without killing the hot-reload for create-react-app? Can anyone provide a working example?
Update
Apparently jQuery datatables has made some major updates since the last time I tried to use their builder and now it includes a way to npm install the extensions too. I'll post a github of a working solution if i find one before someone else can update.
Update
Here is a github i made of a react version that is partially working and a basic html/js/css version that is fully working. The readme tells what is working and not working. Can anyone show me why this not working properly?
I'm trying to get familiar with GitHub's Atom and working with JavaScript on a large-scale project. I've been working with tutorials, and the biggest complaint I'm having with Atom is that I can't find a way to get the out of the box autocomplete to work consistently.
For example, I'm following a relatively simple Node.js tutorial, using ES6 syntax, and I have the following code in a core.js file:
export function logMe(message) {
console.log('message: ' + message);
}
In main.js file, I have the following:
import {logMe} from '../src/core'
logMe('Hello, world!');
However, when typing in main.js, I get no autocomplete suggestions for logMe or anything in my core.js file. I feel like there should be either some existing functionality in autocomplete-plus, or another plugin, that allows autocomplete to work across import statements.
Have you tried using atom-ternjs it is Atom integration with the excellent TernJS. You will need to spend a bit of time generating your .tern-project file by going to the Packages menu → Atom Ternjs → Configure Project, but once you have it setup it works very well.
If you don't want to go down the TernJS route, then there is a setting for the autocomplete-plus package called Include Completions from All Buffers:
In my experience it can create a lot of noise and is dependent upon a the other files being open which doesn't scale well.