Awesome

React Node Key

English | 中文说明

Automatic key-marked for React nodes, generate an unique identifier by render location

Compatibility

• React v16+

• Preact v10+

Install

yarn add react-node-key
# or
npm install react-node-key

Usage

1. Add react-node-key/babel plugins in .babelrc

Why is it needed?

The plugin adds a _nk attribute to each JSX element during compilation to help the react-node-key runtime generate an unique identifier by render location.

{
  "plugins": [
    "react-node-key/babel"
  ]
}

2. Use <NodeKey> as your component's wrapper

import React from 'react'
import ReactDOM from 'react-dom'
import NodeKey from 'react-node-key'

import Test from './Test'

ReactDOM.render(
  <NodeKey>{nodeKey => <Test key={nodeKey} />}</NodeKey>,
  document.getElementById('root')
)