React Credit Cards

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

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 …