3 Best ReactJs Libraries to use in your next project
0 0
Read Time:4 Minute, 28 Second

3 Best ReactJs Libraries to use in your next project

ReactJs is a popular JavaScript framework developed by Facebook. There are tons of ReactJs libraries are available to use for free so, here we are gonna share some of the best and most useful libraries.

  1. React Flow
  2. React Markdown
  3. React Tippy

1. React Flow for ReactJs

Website: reactflow.dev

A highly customizable React component for building interactive graphs and node-based editors.

Key Features:


  • Easy to use: Seamless zooming and panning, single- and multi-selection of graph elements, and keyboard shortcuts are supported out of the box
  • Customizable: Different node and edge types and support for custom nodes with multiple handles and custom edges
  • Fast rendering: Only nodes that have changed are re-rendered and only those in the viewport are displayed
  • Hooks and Utils: Hooks for handling nodes, edges, and the viewport and graph helper functions
  • Plugin Components: Background, MiniMap, and Controls
  • Reliable: Written in Typescript and tested with cypress

How To Install?


The best and easiest way to install React Flow is to install it with the NPM package manager.

npm install react-flow-renderer

Demo Example:


This is only a very fundamental usage example. please refer to the website for guides, examples, and API references.

import ReactFlow, { MiniMap, Controls } from 'react-flow-renderer';
function Flow({ nodes, edges, onNodesChange, onEdgesChange, onConnect }) {
return (
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
>
<MiniMap />
<Controls />
</ReactFlow>
);
}

2. React Markdown for ReactJs

Website: remarkjs.github.io/react-markdown

React Markdown is a React component that can be given a string of markdown that it’ll safely render to React elements.

How to Install?:


In Node.Js, Install With npm:

npm install react-markdown

note: for other methods please refer official documentation.

Basic Usage:

This is only a very fundamental usage example. please refer to the website for guides, examples, and API references.


# A demo of `react-markdown`

`react-markdown` is a markdown component for React.


## Overview

* Follows [CommonMark](https://commonmark.org)
* Optionally follows [GitHub Flavored Markdown](https://github.github.com/gfm/)
* Renders actual React elements instead of using `dangerouslySetInnerHTML`
* Lets you define your own components (to render `MyHeading` instead of `h1`)
* Has a lot of plugins

## Table of contents

Here is an example of a plugin in action
([`remark-toc`](https://github.com/remarkjs/remark-toc)).
This section is replaced by an actual table of contents.

## Syntax highlighting

Here is an example of a plugin to highlight code:
[`rehype-highlight`](https://github.com/rehypejs/rehype-highlight).

```js
import React from 'react'
import ReactDOM from 'react-dom'
import ReactMarkdown from 'react-markdown'
import rehypeHighlight from 'rehype-highlight'

ReactDOM.render(
  <ReactMarkdown rehypePlugins={[rehypeHighlight]}>{'# Your markdown here'}</ReactMarkdown>,
  document.querySelector('#content')
)
```

Pretty neat, eh?

## GitHub flavored markdown (GFM)

For GFM, you can *also* use a plugin:
[`remark-gfm`](https://github.com/remarkjs/react-markdown#use).
It adds support for GitHub-specific extensions to the language:
tables, strikethrough, tasklists, and literal URLs.

These features **do not work by default**.
Use the toggle above to add the plugin.

| Feature    | Support              |
| ---------: | :------------------- |
| CommonMark | 100%                 |
| GFM        | 100% w/ `remark-gfm` |

~~strikethrough~~

* [ ] task list
* [x] checked item

https://example.com

## HTML in markdown

HTML in markdown is quite unsafe, but if you want to support it, you can
use [`rehype-raw`](https://github.com/rehypejs/rehype-raw).
You should probably combine it with
[`rehype-sanitize`](https://github.com/rehypejs/rehype-sanitize).

<blockquote>
  Use the toggle above to add the plugin.
</blockquote>

## Components

You can pass components to change things:

```js
import React from 'react'
import ReactDOM from 'react-dom'
import ReactMarkdown from 'react-markdown'
import MyFancyRule from './components/my-fancy-rule.js'

ReactDOM.render(
  <ReactMarkdown
    components={{
      // Use h2s instead of h1s
      h1: 'h2',
      // Use a component instead of hrs
      hr: ({node, ...props}) => <MyFancyRule {...props} />
    }}
  >
    # Your markdown here
  </ReactMarkdown>,
  document.querySelector('#content')
)
```

 

3. React Tippy:

Website: github.com/tvkhoa/react-tippy

React Tippy Is a very Lightweight ToolTip Library for ReactJs.

Key Features:


  • It is intended to work well with React, and it includes a <Tooltip> element or a higher-order component.
  • It renders tooltip content with React DOM. As a result, you can confidently use it in your React project.
  • It is an enhancement of Tippy.js for using in React.

NOTE: The styles of tooltips and this documentation are from tippy.js ( powered by Bootstrap )

How to Install?:


In Node.Js, Install With Yarn:

yarn add react-tippy

note: for other methods please refer official documentation.

Basic Usage:

This is only a very fundamental usage example. please refer to the website for guides, examples, and API references.


import {
  Tooltip,
} from 'react-tippy';


<Tooltip
  // options
  title="Welcome to React"
  position="bottom"
  trigger="click"
>
  <p>
    Click here to show popup
  </p>
</Tooltip>

 

If you have any doubts or query, Do let us know in the comments below we will try to solve it as soon as possible.

Do Follow Us on:

Facebook.com

Twitter.com

Also Read: React Native: How To Re-Render on Focus change?

Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %

By Akash Kothari

I am passionate about my work. Because I love what I do, I have a steady source of motivation that drives me to do my best. In my last job, this passion led me to challenge myself daily and learn new skills that helped me to do better work

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

One thought on “Useful Libraries to use in your next ReactJs project

Leave a Reply

Discover more from TechDevil

Subscribe now to keep reading and get access to the full archive.

Continue reading