Need private packages and team management tools?Check out npm Teams »

@redneckz/react-devirt

0.0.6 • Public • Published

react-devirt

Devirtualize React and reveal virtual DOM as regular DOM for different purposes (E2E testing, browser plugins)

NPM Version Build Status Coverage Status Bundle size

Installation

npm install --save @redneckz/react-devirt

How-to

Basic Example

import React from 'react';
import ReactDOM from 'react-dom'
import { devirt } from '@redneckz/react-devirt';
 
devirt();
 
const Foo = props => <div {...props} />;
 
ReactDOM.render(
  <Foo quux>
    <span plugh>baz</span>
  </Foo>,
  document.body,
);

will produce

<div data-devirt-type="Foo" quux>
  <span plugh>baz</span>
</div>

Advanced Example

By default only "data-devirt-type" is computed. Other data attributes can be declared by means of custom props serializer. All such attributes are prefixed with "data-devirt".

import React from 'react';
import ReactDOM from 'react-dom'
import { devirt } from '@redneckz/react-devirt';
 
devirt((TargetType, { quux, plugh }) => ({ quux, plugh }));
 
const Foo = ({ children }) => children; // Has no own DOM elements, so invisible
const Bar = ({ plugh, children }) => <div plugh={plugh}>{children}</div>;
 
ReactDOM.render(
  <Foo quux>
    <Bar plugh>
      <span>baz</span>
    </Bar>
  </Foo>,
  document.body,
);

will produce

<div data-devirt-type="Bar,Foo" data-devirt-quux data-devirt-plugh plugh>
  <span>baz</span>
</div>

License

MIT

Install

npm i @redneckz/react-devirt

DownloadsWeekly Downloads

2

Version

0.0.6

License

MIT

Unpacked Size

93.7 kB

Total Files

29

Last publish

Collaborators

  • avatar