DEV Community 👩‍💻👨‍💻

Cover image for Let’s Build a Random Character Generator with Faker.js!
Kailana Kahawaii
Kailana Kahawaii

Posted on • Updated on

Let’s Build a Random Character Generator with Faker.js!

National Novel Writing Month is just around the corner, and it’s a great time to start creating characters to populate your soon to be 50,000-word stories. If you’re like me, I often struggle the most when it comes to naming characters. Thankfully, Faker.js, a random generator library, has a whole host of random names to generate.

It’s helpful to know basic React knowledge before getting started. Check out their documentation if you’re unfamiliar with the framework.

Getting Started

In a directory of your choosing, type the following command to create a React application:

$ npx create-react-app character-creator

Navigate to the project directory.

$ cd character-creator

$ npm i faker

Finally, host the site in your web browser.

$ npm start

Setting Up the Files

This file will have an App.js class and component named CharacterGenerator.js

File structure with App.js at top level and a components folder with CharacterGenerator.js inside

As App.js is at the top level, we’ll want to render our CharacterGenerator through it.

import React, { Component } from 'react'
import CharacterGenerator from './components/CharacterGenerator'
class App extends Component {
 render() {
   return (
    <div>
       <CharacterGenerator/>
     </div>
   )
 }
}
export default App
Enter fullscreen mode Exit fullscreen mode

In the previous code, we are rendering our CharacterGenerator component through App.js

If you haven’t already, create a components folder and within that folder create CharacterGenerator.js

Most of the work we’ll be doing will be in this component.

For now, set up the basic class structure.

import React, { Component } from 'react'
class CharacterGenerator extends Component{
[...]
}

Enter fullscreen mode Exit fullscreen mode

You’ll also want to import the Faker.js library

import Faker from 'faker'

Creating Characters

The Faker library comes with many options for adding fake data for our characters, although the intent is probably business related as opposed fiction related (more on that later). To start creating characters, we’ll add them to our state.

constructor(props){
    super(props)
    this.state = {
        characters: []
    }
}

Enter fullscreen mode Exit fullscreen mode

In our lifecycle method, we’ll load some characters.

componentWillMount() {
       for (let i = 0; i < 5; i++) {
           const character = {
             firstName: Faker.name.firstName(),
             lastName: Faker.name.lastName()
           }
       }
}
Enter fullscreen mode Exit fullscreen mode

This takes care of naming the characters, but I’d like to know a bit more about them. Faker comes loaded with a commerce.color method that lets us generate random colors. Let’s use this give them hair and eye colors.

Add the following to the lifecycle method:

eyeColor: Faker.commerce.color(),
hairColor: Faker.commerce.color(),
Enter fullscreen mode Exit fullscreen mode

Finally, we’ll need to render these characters to the page.

   renderCharacters(character){
       return (
           <div>
               <p>{`${character.firstName} ${character.lastName}` }</p>
           </div>
       )
   }
[...]
render (){
    return(
        <div>
                    <h1>Generate Random characters!</h1>
                    {this.state.characters.map(character => 
                    this.renderCharacters(character))}
                </div>
    )
}

Enter fullscreen mode Exit fullscreen mode

Finally, we're able to see characters on the page.

Characters with hair colors like lime green

Those are some vibrant colors, but they’d probably only be appropriate if you’re writing about fantasy or anime. How can we create natural hair and eye colors?

Creating Natural Colors

Faker doesn’t have a method for natural colors, but we don’t need one. After some cursory research, I found that about 75% of the population has black hair. We can build an object with these distributions.

const naturalHairColors = {
                40: 'black',
                75: 'brunette',
                95: 'blonde',
                99: 'red'
      }
Enter fullscreen mode Exit fullscreen mode

To create a wider spread of different hair colors, I’ve set the black hair color to 40%, but you can pretty much set the color to whatever you want.

To use this object, we’ll need to create a random number between 1 and 100.

let number =  Math.floor(Math.random() * 100) + 1
Enter fullscreen mode Exit fullscreen mode

Then, we’ll look through the object to see which one of the keys is equal to or less than the number.

for (keys in naturalHairColors){
        if (number <= keys){
          return naturalHairColors[keys]
        }
      }
Enter fullscreen mode Exit fullscreen mode

Creating an option for natural eye color follows a similar approach:

generateRandomNaturalEyeColor(){

       const naturalEyeColors = {
                60: 'brown',
                93: 'blue',
                95: 'hazel',
                97: 'amber',
                99: 'gray',
                100: 'violet red'
      }

      let number =  Math.floor(Math.random() * 100) + 1
      let keys;
      for (keys in naturalEyeColors){
        if (number <= keys){
          return naturalEyeColors[keys]
        }
      }
    }
Enter fullscreen mode Exit fullscreen mode

These work great, but there’s no way for us to switch between using the built-in color() method and our new function. We’ll need to create a form to toggle between the two options.

Form to Toggle Colors

I chose to make the Faker library’s fantasy colors the default. With that in mind, I created a form to check which colors I wanted to be natural or fantasy.

<form onSubmit={this.handleSubmit}>
  <label>Use natural hair color
                       <input
                       name="naturalHColor"
                       type="checkbox"
                       checked={this.state.naturalHColor}
                       onChange={(e) => this.handleHairInputChange(e)} />
  </label>
[...]
</form>
Enter fullscreen mode Exit fullscreen mode

For this controlled form, natural hair color will also need to added to the state.

naturalHColor: false
Enter fullscreen mode Exit fullscreen mode

Toggling between the two will cause our state to change from false to “on” (or effectively true and false). Writing a handleHairInput function will take care of this state change.

  handleHairInputChange(event) {
       if(!this.state.naturalHColor){
           this.setState({
               naturalHColor: event.target.value
           });
       } else {
           this.setState({
               naturalHColor: !event.target.value
           });
       }
     }
Enter fullscreen mode Exit fullscreen mode

Finally, since this is a form, we’ll need a submit function. Submitting the form should also change all the characters, so we’ll need to reset our state as well.

reset() {
       this.setState({
           characters: []
       });
   }
Enter fullscreen mode Exit fullscreen mode

The submit function is similar to the logic in our lifecycle method. We create five random characters and then populate the state with them.

You’ll also need to check if the natural hair or eye color is set to on. To do this, check if the state for natural color is set to "on." If it is, use the generateRandomNaturalEyeColor() function. If not, use the Faker library.

handleSubmit = (e) => {
       e.preventDefault()
       this.reset()

       for (let i = 0; i < 5; i++) {
           const character = {
             firstName: Faker.name.firstName(),
             lastName: Faker.name.lastName(),
             eyeColor: this.state.naturalEColor ? this.generateRandomNaturalEyeColor() : Faker.commerce.color(),
             hairColor: this.state.naturalHColor ? this.generateRandomNaturalHairColor() : Faker.commerce.color()
           }


           this.setState(prevState => ({
             characters: [...prevState.characters, character],
           }))
         }
   }
Enter fullscreen mode Exit fullscreen mode

We now have a working character generator!

Gif that shows toggling between natural and Faker generated colors

Uh oh! Did you see my mistake here? Red hair color should actually be set to 100 instead of 99.

const naturalHairColors = {
                40: 'black',
                75: 'brunette',
                95: 'blonde',
                100: 'red'
      }
Enter fullscreen mode Exit fullscreen mode

Fix it and you should be good to go!

Conclusion

We now have a random character generator that creates first names, last names, hair and eye color for our characters. We also have the option to switch between natural and fantastical colors.

By creating objects to hold random data, we can also create attributes such as age, alignment, motivations, etc.

Faker.js also comes with an image library that can help us visualize how our characters act, dress, or feel.

Experiment with the random data until you find a data set that works for you. Happy writing!

Top comments (0)

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.