In this digital world where everyone is sharing their thoughts online, it's necessary to know how your content impacts the readers.
The first duty of an editor is to gauge the sentiment of his reader, and then to tell them what they like to believe.
~ Thorstein Veblen
In this article, I'll show you how to create a simple React App for Sentiment Analysis using the react-sentiment package
Prerequisite
- Basic knowledge of React
- Text-editor of your choice
Step 1: Create React App
Create your React App using the command:
npx create-react-app sentiment-analysis-app
This will result in the following folder structure:
Step 2: Install npm package
Install npm sentiment package
npm install sentiment --save
Step 3: Add Input text field
Go to the src/App.js file and replace the existing code with the following:
import React, { useState, useEffect } from 'react';
import './App.css';
function App() {
const [phrase, setPhrase] = useState('');
return (
<div className="App">
<header className="App-header">
<h2>Sentiment Analysis</h2>
<input value={phrase} onChange={e => setPhrase(e.target.value)}
style={{ padding: '20px', fontSize: '20px', width: '90%' }} />
</header>
</div>
);
}
export default App;
Step 4: Add Sentiment Component
import Sentiment from 'sentiment';
const sentiment = new Sentiment();
Import the 'sentiment' package, which you install earlier into your file.
Now, when the user types anything in the Input text field we need to check the sentiment score.
const [sentimentScore, setSentimentScore] = useState(null);
useEffect(() => {
setSentimentScore(sentiment.analyze(phrase));
}, [phrase]);
In the above code, we have created an initial state of sentiment score and after any change in a phrase, it will update the sentiment score.
Now, display sentiment score using:
{
sentimentScore ?
<p>Sentiment Score: {sentimentScore.score}</p>
: ''
}
Step 5: Change Images based on Sentiment score
Add the images of your choice inside the src/images folder which represent "happy", "sad" & "neutral" behavior.
Now display the different images based on sentiment score.
{
sentimentScore ?
sentimentScore.score === 0 ?
<img src={neutralGIF} alt="neutral" />
:
sentimentScore.score > 0 ?
<img src={positiveGIF} alt="postive" />
:
<img src={negativeGIF} alt="negative" />
: ''
}
Final Code
Your final code in src/App.js file will look like this:
import React, { useState, useEffect } from 'react';
import './App.css';
import positiveGIF from './images/positive.gif';
import negativeGIF from './images/negative.gif';
import neutralGIF from './images/neutral.gif';
import Sentiment from 'sentiment';
const sentiment = new Sentiment();
function App() {
const [phrase, setPhrase] = useState('');
const [sentimentScore, setSentimentScore] = useState(null);
useEffect(() => {
setSentimentScore(sentiment.analyze(phrase));
}, [phrase]);
return (
<div className="App">
<header className="App-header">
<h2>Sentiment Analysis</h2>
<input value={phrase} onChange={e => setPhrase(e.target.value)}
style={{ padding: '20px', fontSize: '20px', width: '90%' }}
/>
{
sentimentScore !== null ?
<p>Sentiment Score: {sentimentScore.score}</p>
: ''
}
{
sentimentScore ?
sentimentScore.score === 0 ?
<img src={neutralGIF} alt="neutral" />
:
sentimentScore.score > 0 ?
<img src={positiveGIF} alt="postive" />
:
<img src={negativeGIF} alt="negative" />
: ''
}
</header>
</div>
);
}
export default App;
Demo
Start your application on localhost:3000
Wrap Up
Thank you for reading. I hope you enjoyed reading it. Please share it with your network. Don’t forget to leave your comments below.
Top comments (0)