React Native component library

To read more quality articles pleaseJabber at the GitHub blog, a hundred quality articles a year waiting for you!

1. NativeBase

Over 10K stars and 1K forks, NativeBase is a popular UI component library that provides dozens of cross-platform components for React Native. When using NativeBase, you can use any off-the-shelf local third-party library, and the project itself provides a rich ecosystem around it, from useful starter-kits to customizable theme templates. It’s a good starter kit.

2. React Native Elements

At over 15K stars, React-Native Elements is a highly customizable cross-platform UI toolkit built entirely in Javascript. Its authors claim that “The idea of React Native Elements is more about component structure than actual design, which means less boilerplate when setting up certain Elements, but complete control over their design,” which should make it appealing to new developers and seasoned veterans alike. This is a sample Expo application that shows all the running components.

3. Shoutem

Shoutem is a React Native UI Kit with more than 4 K stars, consisting of UI components, themes, and component animations. The library provides a set of cross-platform components for iOS and Android, all of which are composable and customizable. Each component also has predefined styles consistent with the others, making it possible to build complex components without having to manually define complex styles.

4.UI Kitten

UI Kitten over 3 K Stars offers a customizable and reusable React-Native component toolkit based on the concept of moving style definitions to specific locations, making components reusable and styling in a single way. You can easily change the theme dynamically by passing a different set of variables. Here’s a good example of Expo to look at.

5. React Native Material UI

A library of over 2k stars, with a set of highly customizable UI components, implements Google’s Material Design. Note that the library uses a JS object called uiTheme, which is passed through the context for maximum customizability. By default, this uiTheme object is based on the lightTheme you can find here.

6. React Native Material Kit

Although released on NPM in December 2017, this LIBRARY of 4K Stars is still worth mentioning as it has a basic but useful set of UI components and themes for implementing Google MD. Why is that? Because it is simple, practical and compatible. However, due to relatively little maintenance, use it with caution.

7. Nachos UI

Over 1.5K stars Nachos UI is a Library of React Native components with over 30 customizable components that also work on the Web thanks to the React Native Web.

8. React Native UI Library

Wix Engineering is developing this state-of-the-art UI toolset and React Native (Demo) component library, which also supports react-Native Animatable and React-Native Blur out of the box. The library comes with a set of predefined style presets (translated into modifiers), including colors, typography, shadows, border radii, and so on.

9. React Native Paper

React Native Paper over 3K stars is a cross-platform UI component library that follows the Material Design guidelines, supports global themes, and has an optional Babel-Plugin to reduce module size. Here is a sample Expo application to help you quickly get to know the library.

10. React Native Vector Icons

More than 10 k stars of library is a set of customizable React Native ICONS, support NNavBar/TabBar/ToolbarAndroid, and image source and complete style. Unsurprisingly, it is very useful and is used by thousands of applications as well as other UI component libraries such as React-native Paper. The library provides a set of prefabricated bundled ICONS out of the box, and here is a complete example of all the ICONS in the library.

11. Teaset

Over 1.35 stars Teaset is a UI library for React Native that contains over 20 pure JS(ES6) components focused on content display and motion control. The documentation is sparse (but extensive), and its simplicity and design caught my eye.

Javascript data visualization library

1. D3js

Over 80K of STAR’s D3.js is probably the most popular and extensive Javascript data visualization library. D3 is used to manipulate documents based on data and implement data using HTML, SVG, and CSS. D3’s emphasis on Web standards gives you the capabilities of modern browsers without coupling to proprietary frameworks, combining visual components with data-driven DOM manipulation methods. It allows you to bind arbitrary data to the Document Object Model (DOM) and then apply data-driven transformations to the document. Here’s a good example library.

2. ChartJS

A very popular (40K star) open source HTML 5 chart library for responsive Web applications using the Canvas element. V.2 provides hybrid chart types, new chart axis types and nifty animations. The design is simple and elegant, with 8 basic chart types, and you can combine the library with moment.js for the timeline.

##3. ThreeJS

This very popular library (over 45K stars; 1K contributor) uses WebGL to create 3D animations. The flexibility and abstraction of the project means that it is also useful for visualizing 2 – or 3-dimensional data. For example, you can also use this designated module for 3D graphics visualization via WebGL, or try using this online playground.

4. Echarts & Highcharts

Baidu’s Echarts project (over 30K stars) is an interactive chart and visualization library for browsers. It is written in pure JavaScript and based on the ZRender Canvas library. It supports Canvas, SVG(4.0+), and VML formats for rendering charts. In addition to PCS and mobile browsers, Echart can also be used with Node-Canvas for efficient server-side rendering (SSR).

Highcharts JS is over an 8K stars SVG based chart library that supports BOTH VML and canvas from older browsers. It claims that 72 of the world’s 100 largest companies use EB, making it (probably) the most popular JS charting API in the world (Facebook, Twitter).

5. Metric-Graphics

Metricsgraphics.j (7K stars) is an optimized library for visualizing and displaying time series data. It is relatively small (80KB compression) and offers sophisticated and elegant selection of line, scatter, histogram, bar, and data tables, as well as features such as density plots and basic linear regression. Here’s a link to the interactive sample library.

6. Recharts

Recharts is a chart library built using React and D3 that supports the declarative React component approach. The library provides native SVG support and lightweight dependency trees (D3 submodules) are highly customizable through component props. You can find more examples on the documentation website.

7. Raphael

A 10K stars Javascript vector library for handling vector graphics in the Web. The library uses the SVG W3C recommendation and VML as the basis for creating graphics, so each graphics object is also a DOM object that you can attach to JavaScript event handlers. Raphael currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.

8. C3js

8K Stars’ C3js is a D3-based reusable chart library for Web applications. The library provides classes for each element, so you can define custom styles through classes and extend the structure directly through D3. It also provides various apis and callbacks to access the state of the chart. By using them, you can even update the diagram after rendering to see these examples.

9. React Virtualized + React Vis + Victory

React- VIS (5K Stars) is a set of React components for Uber that display data in a consistent manner, including line/face/bar charts, heat maps, scatter plots, contour plots, hexagonal heat maps, and more. The library does not require any prior knowledge of D3 or any other database and provides low-level modular building block components such as the X/Y axis.

React Virtualized (12K Stars) is a set of React components that are used to efficiently render large tables and table data. Each distribution provides ES6, CommonJS, and UMD builds, and the project supports Webpack 4 workflows. Note react, which must be specified as a peer dependency to avoid version conflicts.

Victory is a collection of React composable components for building interactive data visualizations, built by a powerful lab with over 6K stars, Victory uses the same API for Web and React Native applications to facilitate cross-platform mapping. An elegant and flexible way to leverage the React component to support actual data visualization.

10. Raw graphs

Raw over 5K stars is a link between spreadsheets and data visualizations for creating vector-based custom visualizations on top of the D3.js library. It can handle tabular data (extended lists and comma-separated values) as well as copy-and-paste text from other applications. Based on the SVG format, you can edit the visualizations using vector graphics applications for further improvement, or embed them directly into Web pages.

11. Metabase

With over 11K stars Metabase, creating data dashboards using SQL is a very fast and easy way to do this without knowing SQL(but using SQL schema for analysts and data professionals). You can create spec sections and metrics, send data to Slack(and use MetaBot to view data in Slack), and so on. This can be a great tool to visualize data internally for your team, although some maintenance may be required.

The original:Blog. Bitsrc. IO / 11 – react – na…

Blog. Bitsrc. IO / 11 – javascri…

Your likes are my motivation to keep sharing good things.

communication

Dry goods series of articles summarized as follows, feel good point Star, welcome to add groups to learn from each other.

Github.com/qq449245884…

I am Xiaozhi, the author of the public account “Big Move the world”, and a lover of front-end technology. I will often share what I have learned to see, in the way of progress, mutual encouragement!

Pay attention to the public number, background welfare, you can see the welfare, you know.