Forem: Manindu Wijewickrama

A List of Useful npm Packages for React Developers

Manindu Wijewickrama — Sun, 07 Jul 2019 04:56:26 +0000

(Originally posted on manindu.dev)

Hi all, this is a list of useful npm packages for React developers. I'm planning to update this frequently by adding more packages. Your suggestions are welcome 😊. Happy coding!!

UI component libraries

antd - Ant Design is an enterprise grade UI design system.
@material-ui/core - React Material UI components
react-bootstrap - Bootstrap 4 components built with React
react-bulma-components - React component for Bulma framework
semantic-ui-react - A React component library
office-ui-fabric-react - The React-based front-end framework for building experiences for Office and Office 365
reactstrap - Stateless React Components for Bootstrap 4
rebass - React primitive UI components built with styled-system
@appbaseio/reactivesearch - React UI components for Elasticsearch

Individual UI components

@tippy.js/react - The complete tooltip and popover solution for React apps
react-spinners - A collection of loading spinners with React.js based on Halogen
react-loader-spinner - react-spinner-loader provides simple React.js spinner component which can be implemented for async wait operation before data load to the view
react-spinners-kit - A collection of loading spinners built with styled-components
draft-js - Draft.js is a JavaScript rich text editor framework, built for React and backed by an immutable model
react-custom-scrollbars - Custom scrollbars for React
react-select - The Select control for React
react-dropdown - Simple Dropdown component for React, inspired by react-select
react-horizontal-scrolling-menu - A horizontal scrolling menu component for React
react-collapsible - React responsive collapsible section component
react-calendar - Calendar component for React
react-datepicker - A simple and reusable Datepicker component for React
react-table - react-table is a lightweight, fast and extendable datagrid built for React
react-awesome-button - A button component for React
react-compound-slider - React Compound Slider is a tiny (4.3kb) slider component with no opinion about markup or styles
rheostat - A mobile, tablet, desktop, and accessible slider for the web by Airbnb
react-checkbox-tree - A simple and elegant checkbox tree for React
recharts - Recharts is a Redefined chart library built with React and D3
react-chartjs-2 - React wrapper for Chart.js 2
react-vis - A collection of react components to render common data visualization charts
victory - React.js components for modular charting and data visualization
react-modal - Accessible modal dialog component for React.JS
react-responsive-modal - A simple responsive and accessible react modal compatible with React 16 and ready for React 17
react-slick - Carousel component built with React. It is a react port of slick carousel
react-responsive-carousel - A responsive carousel component for React
pure-react-carousel - A highly impartial suite of React components that can be assembled by the consumer to create a responsive and aria compliant carousel with almost no limits on DOM structure or CSS styles
react-grid-gallery - Justified image gallery component for React inspired by Google Photos and based upon React Images
react-images - A mobile-friendly, highly customizable, carousel component for displaying media in ReactJS
react-image-lightbox - A flexible lightbox component for displaying images in a React project
react-tabs - An accessible and easy tab component for ReactJS

CSS in JS

styled-components - Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress
emotion - A CSS in JS library
radium - Radium is a set of tools to manage inline styles on React elements. It gives you powerful styling capabilities without CSS

Http clients

axios - Promise based HTTP client for the browser and node.js
apisauce - An http client built on top of axios
request - Request is designed to be the simplest way possible to make http calls. It supports HTTPS and follows redirects by default
superagent - Small progressive client-side HTTP request library, and Node.js module with the same API, sporting many high-level HTTP client features

Routing

react-router-dom - DOM bindings for React Router
universal-router - A simple middleware-style router that can be used in both client-side and server-side applications
connected-react-router - A Redux binding for React Router v4 and v5

State management

redux - Redux is a predictable state container for JavaScript apps
react-redux - Official React bindings for Redux
mobx - MobX is a battle tested, simple and scalable state management library transparently applying functional reactive programming (TFRP)
redux-saga - redux-saga is a library that aims to make application side effects (i.e. asynchronous things like data fetching and impure things like accessing the browser cache) easier to manage
redux-thunk - Thunk middleware for Redux
redux-persist - Persist and rehydrate a redux store

Creating React Components From Command Line

Manindu Wijewickrama — Sat, 06 Jul 2019 12:11:12 +0000

In this tutorial, I'm going to show you an easy way to configure your React project for creating components from the command line.

Let's get started by creating a new React project using create-react-app.

Execute the following command in your terminal. This will create a new project named components-demo.

manindu@dev:~$ create-react-app components-demo

Next we have to install create-react-component-folder (created by Snær Seljan Þóroddsson - GitHub) NPM package as a development dependency in our project. As the name implies, this is the package which allows us to create components using the command line.

manindu@dev:~$ npm i --save-dev create-react-component-folder

Now it's time to create some components!!. I would like to create a directory named components and create my components inside that. We can do that by executing the command below.

manindu@dev:~$ npx crcf components/Button Input

I just created two components named Button and Input.

  Button
  |_Button.css
  |_Button.js
  |_Button.test.js
  |_index.js

  Button
  |_Input.css
  |_Input.js
  |_Input.test.js
  |_index.js

Now we have two components with .css files for each of them. However, I prefer to use SASS with CSS modules for our project. We can do that by adding a configuration fie create-react-component-folder

In the project root, create a file named .crcfrc and add the code below.

  [
    "scss",
    "cssmodules"
  ]

Delete the Button and Input components that we created earlier and run the same command as below.

  manindu@dev:~$ npx crcf components/Button Input

This time you will get the same components with .module.scss files which means now you can use SASS with CSS modules for styling (you have to install node-sass for using sass)

  Button
  |_Button.js
  |_Button.module.scss
  |_Button.test.js
  |_index.js

  Button
  |_Input.js
  |_Input.module.scss
  |_Input.test.js
  |_index.js

You can read more about the create-react-component-folder on their documentation.

Happy Coding!!!

Expo vs pure React Native: What would you recommend?

Manindu Wijewickrama — Sun, 03 Jun 2018 03:36:21 +0000

Should I go with Expo for a new React Native project? or should I stick to pure React Native? What's your recommendation?