CODEWITHSUNDEEP
node.jsreactjsnpmuuideslint
Uzair Khan
Uzair Khan

Reputation: 2970

Use npm uuid in reactjs

I have a place wherein I am required to use npm uuid package for generating unique Id's. After installing uuid package, the usage is as follows: 

const uuid = require('uuid/v1');
uuid();

But I have error which says:

[eslint] Unexpected require(). (global-require)

My function is as below: 

someFunction = (i, event) => {
   if(someCondition) {
       //generate some unique id
       const uuid1 = require('uuid/v1');
       uuid1();
       //call some function and pass this id
       someFunction2(uuid1);
    } else{ 
      //generate some unique id
       const uuid2 = require('uuid/v1');
       uuid2();
       //call some function and pass this id
       someFunction2(uuid2);
    }

What is the best way to use require in ReactJs.

Upvotes: 36

Views: 98798

Answers (13)

David MD
David MD

Reputation: 87

using in a typescript app, you must install with types init.

npm i --save-dev @types/uuid

Then Importing like below will work with ease

import { v4 as uuidv4 } from "uuid";

Upvotes: 0

Bello Shehu
Bello Shehu

Reputation: 345

If what you are trying to do is to display a list of component items, you might consider this pattern:

import React from 'react'
import {v4 as uuidv4} from 'uuid'

const Project = ({title}) =>{
    return(
        <li>{title}</li>
    )
}
const ProjectList = ({projects}) => {
  return (
    <div>
        <ul>
            {
                projects.map(project => <Project title={project.title} key={uuidv4()}/>)
            }
        </ul>
    </div>
  )
}

export default ProjectList

Upvotes: 0

CoderZZZZZZZ
CoderZZZZZZZ

Reputation: 1

Generate Unique ID in JavaScript using UUID

  1. make sure your at root run ls if your not sure look for package.json

  2. run npm i uuid

  3. to use it in the file you need

const {v4: uuidv4} = require('uuid')

now for the hard part if your using a route such as

controller.upload = (req, res) => {
    const id = uuidv4() // each upload will have a uuid thats random add your logic 
}

reference

Upvotes: 0

szachMati
szachMati

Reputation: 216

Using React with typescript version 4.5.0 or higher.

  1. Run: npm install --save @types/uuid

  2. Create directory "@types" in root folder with file "allTypes.d.ts" and add there

    declare module "uuid";

  3. In ts.config.json under compilerOptions add:

    "typeRoots": ["./node_modules/@types","./@types" ]

  4. Rerun your app and import where necessary
    import { v4 as uuidv4 } from "uuid";

Upvotes: 1

Saeid
Saeid

Reputation: 648

you must go to this folder => your drive:/your projectfolder/node_modules/uuid/dist/v1 and see your uuid's folder by defult this is in top folder

import UUID From 'uuid/dist/v1'

Upvotes: 0

Gucal
Gucal

Reputation: 923

import React from "react";
import ReactDOM from "react-dom";
import * as uuid from "uuid";

function App() {
  return (
    <div className="App">
      <h1>{uuid.v4()}</h1>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Upvotes: 1

DevLoverUmar
DevLoverUmar

Reputation: 14001

As of September,2020 I got this working by first, installing the types as

yarn add @types/uuid

then as

import React from "react";
import ReactDOM from "react-dom";
import { v4 as uuidv4 } from 'uuid';

function App() {
  return (
    <div className="App">
      <h1>{uuidv4()}</h1>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

If this code don't work in future, refer to this section of official docs.

Upvotes: 20

mohammad haddad
mohammad haddad

Reputation: 9

you can import in different ways

1----From the command line Installing

npm i react-uuid
import uuid from 'react-uuid'

and use for key variable like below 

key={uuid()}

2---- A better way I always use is

first, install

npm install uuid

then import 

import { v1 as uuidv1 } from 'uuid';

and use 

uuidv1();

for more details read

Upvotes: 0

Nawab Ali
Nawab Ali

Reputation: 590

For React JS:

import { v1 as uuidv1 } from 'uuid';
uuidv1(); // ⇨ '2c5ea4c0-4067-11e9-8bad-9b1deb4d3b7d'

Upvotes: 0

Bassem
Bassem

Reputation: 4050

Just in case you would like to use uuid v4, this is how you can import it in react.

import uuid from 'uuid/v4'

Upvotes: 2

Ping Woo
Ping Woo

Reputation: 1773

In react use import.

In Nodejs project use 'require'.

If you want to use import in normal nodejs project "babel" is needed to setup.

Upvotes: 0

Tu Nguyen
Tu Nguyen

Reputation: 10179

Try this:

import React from "react";
import ReactDOM from "react-dom";
import uuid from "uuid";

function App() {
  return (
    <div className="App">
      <h1>{uuid.v4()}</h1>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

This is a working example: https://codesandbox.io/s/0pr5vz48kv

Upvotes: 58

Aravind
Aravind

Reputation: 543

You don't have to require the package always. Just require it only once and use it wherever you want.

const uuidv1 = require('uuid/v1');

if (condition) {
    some_id = uuidv1();
    some_function(some_id);

} else {
    other_id = uuidv1();
    other_function(other_id);
}

It's as simple as that.

Upvotes: 3

Related Questions