In this article, we would put our heads together about all the things you need to know how to enhance your React project. React developers are in great demand since it is used by Yandex, Netflix, Facebook, and many more well-known businesses. We would be discussing about the useful react Open source component that take another touch your User Interface.

1.React-Player

2.Nsfwjs

3.ckeditor5-react

4.react-google-charts

Now we take into the deep

1.React-Player

A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, DailyMotion and Kaltura.

usage

npm install react-player # or yarn add react-player

import React from 'react'
import ReactPlayer from 'react-player'

// Render a YouTube video player
<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />

By default, ReactPlayer supports many different types of url. If you only ever use one type, use imports such as react-player/youtube to reduce your bundle size. See config keys for all player keys.

import React from 'react'
import ReactPlayer from 'react-player/youtube'

// Only loads the YouTube player
<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />

If your build system supports import() statements, use react-player/lazy to lazy load the appropriate player for the url you pass in. This adds several reactPlayer chunks to your output, but reduces your main bundle size.

import React from 'react'
import ReactPlayer from 'react-player/lazy'

// Lazy load the YouTube player
<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />

The component parses a URL and loads in the appropriate markup and external SDKs to play media from various sources. Props can be passed in to control playback and react to events such as buffering or media ending. See the demo source for a full example.

For platforms without direct use of npm modules, a minified version of ReactPlayer is located in dist after installing. To generate this file yourself, checkout the repo and run npm run build:dist.

• If you are using npm and need to support browsers without Promise you will need a Promise polyfill. -To support IE11 you will need to use babel-polyfill or a similar ES2015+ polyfill.

2.Nsfwjs

The choice to make the comment section anonymous was a deliberate design choice, as it makes it easier to let users engage with the application without much hassle. But the downside to this is that the comment section can seem dull/artificial, without a user name or photo associated with the comment. To overcome this, I have included a unique Jdenticon or user icon, for every comment made under the blog post. The comments are displayed in reverse chronological order and will always have a unique icon associated with it! The other issue with the anonymous comments section, which became apparent after the initial build being pushed to production, was that users now used language that was NSFW. Since this is a project I intend to display on my portfolio, for potential employers, it was necessary to deal with words can be deemed NSFW. The easiest solution is to restrict only authenticated users to comment, along with their public social media name. But trolls with a fake account can easily bypass this. Hence it became necessary to censor certain words from the posted comments using * symbols. This was accomplised using the package bad-words package to censor NSFW words unconditionally. There is scope for improvement in terms of implementing a custom profanity filter, but that seemed to be overkill for the task at hand. It is not my intention to hinder anybody's freedom of speech, but a reactionary decision against a few bad actors, in an effort to maintain the application's presentability.

A simple JavaScript library to help you quickly identify unseemly images; all in the client's browser. NSFWJS isn't perfect, but it's pretty accurate (~90% with small and ~93% with midsized model)... and it's getting more accurate all the time.

QUICK: How to use the module

npm i nsfw

With async/await support:

import * as nsfwjs from 'nsfwjs'

const img = document.getElementById('img')

// Load model from my S3.
// See the section hosting the model files on your site.
const model = await nsfwjs.load()

// Classify the image
const predictions = await model.classify(img)
console.log('Predictions: ', predictions)

Without async/await support:

import * as nsfwjs from 'nsfwjs'

const img = document.getElementById('img')

// Load model from my S3.
// See the section hosting the model files on your site.
nsfwjs.load()
  .then(function (model) {
    // Classify the image
    return model.classify(img)
  })
  .then(function (predictions) {
    console.log('Predictions: ', predictions)
  })

I personally used this library in my personal project that's name is Blog-app githubLink-BlogApp

for more details go through their github repo-Nsfw

3.ckeditor5-react

Although it may seem obvious that the editor used in a blogging platform needs to support multiple text editing options, it was a little challenging to find the appropriate solution to fit the needs of the current project. There were many WYSIWYG editors which provided sufficient documentation too, but in the end, the most optimal solution to the issue was to use the CKeditor rich HTML editor's React component implementation, with a custom toolbar configuration. The other options included react-markdown-editor-lite and the react-draft-wysiwyg. Go through with official github repo for more details-ckeditor5-react

4.react-google-charts

A thin, typed, React wrapper for Google Charts. Google Charts is a free Javascript library that allows you to visualize data in many types of charts and graphs. It's very useful and easy to use in your projects.

Install this library with your favorite package manager:

npm install --save react-google-charts

or

 yarn add react-google-charts

Using Google Charts With Hooks

The first approach we'll check is how to use Google Charts in React with Hooks.

import { useEffect, useState } from "react";

function useGoogleCharts () {
  const [google, setGoogle] = useState(null);

    useEffect(() => {
        if (!google) {
            //TODO load google charts
        }
   }, [google]);

  return google;
}

export default useGoogleCharts;

This creates a new hook that has a state google. This state allows us to check if Google Charts is loaded or not and it will hold the loaded window.google object. Then, we will use useEffect to load the charts when they're not loaded. Finally, we just return google. For more details go through their github repo-Link

Thanks a lot for staying with me up till this point, I hope you enjoy reading this article.