A slick credit card component for React. Install Usage Don’t forget to import the react-credit-cards/lib/styles.scss if you are using SASS in your project.Or you can import the CSS:import ‘react-credit-cards/es/styles-compiled.css’; Features We support all credit card issuers available in Payment plus Hipercard (a brazilian credit card). Props name {string}: Name on card. * number {string|number}: Card number. * expiry {string|number}: Card expiry date. 10/20 or 012017 * …
Datatables for React using Material-UI
MUI-Datatables is a data tables component built on Material-UI. It comes with features like filtering, resizable + view/hide columns, search, export to CSV download, printing, selectable rows, expandable rows, pagination, and sorting. On top of the ability to customize styling on most views, there are three responsive modes “stacked”, “scrollMaxHeight”, and “scrollFullHeight” for mobile/tablet devices. https://github.com/gregnb/mui-datatables
Angular i18n vs ngx-translate
There are normally 2 ways of implement multi language in angular. i18n is supported by Angular team officially. ngx-translate is on https://github.com/ngx-translate/core Both has pros and cons. i18n is supported long term and ngx-translate is not supported long term because Angular team hired the author of the repository to develop i18n package. i18n should have …
win-node-env package
We often see this error when running node projects on windows… As we are already familiar this is because node scripts are configured to use UNIX shell commands by some un-experienced developers. But we may be at circumstances that we should not change here and there, and we are on windows, needs to run this …
React Hackin Solution – Passing variables and methods to props.children
We can pass variables and methods to props.children following way. React.Children.map(children, child => React.cloneElement(child, { method: methodName } ) This is useful when we need to pass variables and methods to react components which is embeded from props.children.
International phone number input for React.
Install If you’re not using a bundler then use a standalone version from a CDN. Use The component requires two properties to be passed: value and onChange(value). import ‘react-phone-number-input/style.css’import PhoneInput from ‘react-phone-number-input’ return ( <PhoneInput placeholder=”Enter phone number” value={ this.state.phone } onChange={ phone => this.setState({ phone }) } />) value will be the parsed phone number, e.g. if a user chooses “United States” and enters (213) 373-4253 then value will be +12133734253. See the list of all available props for <PhoneInput/>. All other properties are passed through to the phone …
Handsontable
Handsontable is a JavaScript/HTML5 data grid component with spreadsheet look & feel.It provides easy data binding, data validation, filtering, sorting and CRUD operations. Handsontable works with Vue, React and Angular. https://www.npmjs.com/package/handsontable
Monaco Editor
Monaco Editor is the code editor that powers VS Code. It supports code syntax highlighting for over 30 programming languages and provides functionality to switch between themes in one click. Here is example of the Monaco Editor https://microsoft.github.io/monaco-editor/ Monaco Editor provides diff editor as well, which is similar to git diff check.