open-index/open-npm huggingface dataset:
npm package: @react-rangers/stateful
Description: An easy way to write stateful React components
Author: Hagmajer Capital sp. z o.o.
Latest version: 1.1.1

# Stateful
#### An easy way to write stateful [React](https://reactjs.org/) components

```javascript
import Stateful from '@react-rangers/stateful';

const App = () => (
  <Stateful initialState={{ count: 0 }}>
    {state => (
      <button onClick={() => { state.count += 1; }}>
        {state.count}
      </button>
    )}
  </Stateful>  
)
```

Here's the same app written in standard way as of React 16

```javascript
class App extends React.Component {
  state = {
    count: 0,
  };

  render() {
    <button onClick={() => this.setState({ count: state.count + 1})}>
      {state.count}
    </button>    
  }
}
```

Please check out [the introductory blog post](https://medium.com/react-rangers/an-easy-way-to-write-stateful-react-components-f210f253f520)
for more documentation and usage examples.
npm package: @react-ratel/core
Description: React full library
Author: Romain Roufast
Latest version: 0.0.15

# react-ratel

> React components library (datepicker, tooltip, popover, select...). Just wrappers around some famous libraries.

## Install

```bash
yarn add react-ratel
```

## Usage

```jsx
import React, { Component } from "react";
import ThemeProvider from "@react-ratel/core/ThemeProvider";
import DefaultTheme from "@react-ratel/core/Theme/DefaultTheme";
// style
import Reset from "@react-ratel/core/Reset";
import GlobalStyle from "@react-ratel/core/GlobalStyle";
// buttons
import Button from "@react-ratel/core/Button";
import DropdownButton from "@react-ratel/core/DropdownButton";
import RoundButton from "@react-ratel/core/RoundButton";
import StackedButton from "@react-ratel/core/StackedButton";
// zones
import Box from "@react-ratel/core/Box";
import BackgroundBox from "@react-ratel/core/BackgroundBox";
import UploadBox from "@react-ratel/core/UploadBox";
import Divider from "@react-ratel/core/Divider";
// fonts
import A from "@react-ratel/core/A";
import H1 from "@react-ratel/core/H1";
import H2 from "@react-ratel/core/H2";
import H4 from "@react-ratel/core/H4";
import P from "@react-ratel/core/P";
import Text from "@react-ratel/core/Text";
// spacing
import Padding from "@react-ratel/core/Padding";
import Margin from "@react-ratel/core/Margin";
// overlay
import Overlay from "@react-ratel/core/Overlay";
// icons
import Icon from "@react-ratel/core/Icon";
// layout
import Row from "@react-ratel/core/Row";
import Col from "@react-ratel/core/Col";
import Div from "@react-ratel/core/Div";
// tooltip
import Tooltip from "@react-ratel/core/Tooltip";
// form
import Input from "@react-ratel/core/Input";
import Label from "@react-ratel/core/Label";
import Textarea from "@react-ratel/core/Textarea";
import Select from "@react-ratel/core/Select";
import VirtualizedSelect from "@react-ratel/core/VirtualizedSelect";
import DatePicker from "@react-ratel/core/DatePicker";
import Switch from "@react-ratel/core/Switch";
// modal
import Modal from "@react-ratel/core/Modal";
// list
import List from "@react-ratel/core/List";
import ListItem from "@react-ratel/core/List/ListItem";
// loader
import Loader from "@react-ratel/core/Loader";
// card
import Card from "@react-ratel/core/Card";
// image
import BackgroundImage from "@react-ratel/core/BackgroundImage";
// alert
import Alert from "@react-ratel/core/Alert";
// tag
import Tag from "@react-ratel/core/Tag";
// toast
import Toast from "@react-ratel/core/Toast";
// progress
import Progress from "@react-ratel/core/Progress";
// Stats
import Gauge from "@react-ratel/core/Gauge";

function Example() {
  return (
    <>
      <Reset />
      <ThemeProvider theme={DefaultTheme}>
        <>
          <GlobalStyle />
          {/* Your app */}
        </>
      </ThemeProvider>
    </>
  );
}
```
npm package: @react-rbac/rbac
Description: React Role Based Access Control module
Author: https://github.com/lfernando2091
Latest version: 0.0.0

# React RBAC

### What it is?

This a Role Based Access Control library for React.js

### Key features:

- Easy to use
- Granular control of each React component
- Roles and actions defined with TypeScript allowing types check
- Implement using hooks or components
- Configure via React Context

### Installation

```shell
npm i @react-rbac/rbac
```

### Basic usage

```tsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { RBACProvider, type Roles } from "@react-rbac/rbac";

// Define only expected roles and actions for you entire app
declare module '@react-rbac/rbac' {
    // Define your app roles here
    interface RoleOverrides {
        editor: string;
        viewer: string;
        consumer: string;
    }
    
    // Define your allowed actions for each role
    interface ActionOverrides {
        view: string;
    }
}

// Define your roles and actions
const roles: Roles = {
    admin: {
        // Alloed actions for role Admin
        action: ['create', 'edit', 'delete', 'view'],
    },
    editor: {
        action: ['create', 'edit', 'view'],
    },
    viewer: {
        action: ['view']
    },
    consumer: {
        action: ['view', 'update']
    }
}

createRoot(document.getElementById('root')!).render(
    <StrictMode>
        {/* Selected user role for your app is "admin" */}
        <RBACProvider roles={roles} userRole="admin">
            <MyReactApp />
        </RBACProvider>
    </StrictMode>,
)


```

### Allow component

This component will render the child content only if the user has the
role=Admin and allowed action=Create.

```tsx
<Allow role="admin" action="create">
    <button>Admin Create</button>
</Allow>
```

### Allow hook

Works in the same ways as `Allow` component but defined in React hook component. 
It will return `true` only if the user has role=Admin and action=Create.

```tsx
const [ allow ] = useAllow("admin", "create");
```

### Exclude component

This component will exclude rendering content to the defined role with action 
and allow all the on others.

> [!NOTE]
> This component is useful when you have defined many roles and let's say a button should be 
> display for all the roles except one, so you only need to define that excluded role from rendering content

```tsx
<Exclude role="admin" action="create">
    <button>Admin Create</button>
</Exclude>
```

### Exclude hook

Works in the same ways as `Exclude` component but defined in React hook component.
It will return `true` only if the user has no role=Admin and action=Create.

```tsx
const [ exclude ] = useExclude("admin", "create");
```
npm package: @react-render-measurement-tool/profiling-renderer
Description: Enables advanced React Native profiling by using a custom renderer build.
Latest version: 18.3.1-1

# `react-test-renderer`

This package provides an experimental React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment.

Essentially, this package makes it easy to grab a snapshot of the "DOM tree" rendered by a React DOM or React Native component without using a browser or jsdom.

Documentation:

[https://reactjs.org/docs/test-renderer.html](https://reactjs.org/docs/test-renderer.html)

Usage:

```jsx
const ReactTestRenderer = require('react-test-renderer');

const renderer = ReactTestRenderer.create(
  <Link page="https://www.facebook.com/">Facebook</Link>
);

console.log(renderer.toJSON());
// { type: 'a',
//   props: { href: 'https://www.facebook.com/' },
//   children: [ 'Facebook' ] }
```

You can also use Jest's snapshot testing feature to automatically save a copy of the JSON tree to a file and check in your tests that it hasn't changed: https://jestjs.io/blog/2016/07/27/jest-14.html.
npm package: @react-resources/common-representation
Description: React resources
Author: Aaron Burmeister
Latest version: 0.1.1
Deprecated: No further support

[![npm version](https://badge.fury.io/js/%40react-resources%2Fcommon-representation.svg)](http://npmjs.com/package/%40react-resources%2Fcommon-representation)

# @react-resources/common-representation

## [Showcase and documentation](http://react-resources.github.io)
npm package: @react-resources/common-semantic
Description: React resources
Author: Aaron Burmeister
Latest version: 0.1.3
Deprecated: No further support

[![npm version](https://badge.fury.io/js/%40react-resources%2Fcommon-semantic.svg)](http://npmjs.com/package/%40react-resources%2Fcommon-semantic)

# @react-resources/common-semantic

## [Showcase and documentation](http://react-resources.github.io)
npm package: @react-resources/common-ui
Description: React Resources
Author: Aaron Burmeister
Latest version: 0.1.5
Deprecated: Not supported

# @react-resources/common-ui [![npm version](https://badge.fury.io/js/%40react-resources%2Fcommon-ui.svg)](http://npmjs.com/package/%40react-resources%2Fcommon-ui)

This is a React Resources module.
Please visit [react-resources.github.io](http://react-resources.github.io) for examples and documentation.
npm package: @react-resources/core
Description: React Resources
Author: Aaron Burmeister
Latest version: 0.5.0
Deprecated: Replaced by @civet/core

# @react-resources/core [![npm version](https://badge.fury.io/js/%40react-resources%2Fcore.svg)](http://npmjs.com/package/%40react-resources%2Fcore)

This is a React Resources module.
Please visit [react-resources.github.io](http://react-resources.github.io) for examples and documentation.
npm package: @react-resources/data-feathers
Description: React Resources
Author: Aaron Burmeister
Latest version: 0.1.4
Deprecated: No further support since @react-resources/core@0.5.0

# @react-resources/data-feathers [![npm version](https://badge.fury.io/js/%40react-resources%2Fdata-feathers.svg)](http://npmjs.com/package/%40react-resources%2Fdata-feathers)

This is a React Resources module.
Please visit [react-resources.github.io](http://react-resources.github.io) for examples and documentation.

## TODO:

  - data mapping
npm package: @react-resources/data-feathers-redux
Description: React resources
Author: Aaron Burmeister
Latest version: 0.1.1
Deprecated: Please use @react-resources/data-feathers instead

[![npm version](https://badge.fury.io/js/%40react-resources%2Fdata-feathers-redux.svg)](http://npmjs.com/package/%40react-resources%2Fdata-feathers-redux)

# @react-resources/data-feathers-redux

## [Showcase and documentation](http://react-resources.github.io)
npm package: @react-resources/data-memory
Description: React Resources
Author: Aaron Burmeister
Latest version: 0.4.0
Deprecated: Not supported

# @react-resources/data-memory [![npm version](https://badge.fury.io/js/%40react-resources%2Fdata-memory.svg)](http://npmjs.com/package/%40react-resources%2Fdata-memory)

This is a React Resources module.
Please visit [react-resources.github.io](http://react-resources.github.io) for examples and documentation.
npm package: @react-resources/resources
Description: React resources
Author: Aaron Burmeister
Latest version: 0.1.2
Deprecated: Please use @react-resources/core instead

[![npm version](https://badge.fury.io/js/%40react-resources%2Fresources.svg)](http://npmjs.com/package/%40react-resources%2Fresources)

# @react-resources/resources

## [Showcase and documentation](http://react-resources.github.io)
npm package: @react-riftgate/teleporter
Description: A library that provides lower-level React components for teleporting React components from one place to another in the same React tree
Author: Quang Trinh
Latest version: 0.1.3

<h1 align="center">React Riftgate</h1>

<p align="center">
  <a href="https://webuild.community">
    <img src="https://raw.githubusercontent.com/webuild-community/badge/master/svg/love.svg" alt="From Vietnam with &lt;3">
  </a>
  <a href="https://www.npmjs.com/package/@react-riftgate/teleporter">
    <img alt="NPM version" src="https://img.shields.io/npm/v/@react-riftgate/teleporter.svg?logo=npm&color=007acc" />
  </a>
  <a href="https://app.netlify.com/sites/react-riftgate/deploys">
    <img src="https://api.netlify.com/api/v1/badges/f85a4880-68da-440b-aeb9-fd54f0140286/deploy-status?branch=main" alt="Netlify Status">
  </a>
</p>

**react-riftgate** is an open source library that provides lower-level [React](https://reactjs.org/)
components for teleporting React components from one place to another in the same React tree.

# [Docs](https://react-riftgate.netlify.app)

See the documentation at [react-riftgate.netlify.app](https://react-riftgate.netlify.app) for more information about using `react-riftgate`!

# Example

```tsx
import { Teleporter } from "@react-riftgate/teleporter";

const MyComponent = () => {
  return (
    <div>
      {/**
       * `Teleporter.Gate` is the destination that will have dynamic content
       **/}
      <Teleporter.Gate portKey="somekey" id="gate" />
      {/**
       * `Teleporter.Domain` is the teleport1able area that will move everything
       * inside `Teleporter.Move` to the `Teleporter.Gate` which has the same
       * `portKey` value, while leaving the rest which are outside of
       * `Teleporter.Move` untouched
       **/}
      <Teleporter.Domain portKey="somekey">
        {/**
         * Stuff here won't be put to `Teleporter.Gate` because they are
         * not inside `Teleporter.Move`
         **/}
        <div id="ignore-me-please" />
        <Teleporter.Move>
          {/**
           * This will be teleported to `<Teleporter.Gate portKey="somekey" />`
           **/}
          <div id="please-put-me-in-gate" />
        </Teleporter.Move>
      </Teleporter.Domain>
    </div>
  );
};
```

The rendered HTML structure will be like below

```html
<div>
  <div id="gate">
    <div id="please-put-me-in-gate"></div>
  </div>
  <div id="ignore-me-please"></div>
</div>
```

# Quick start

[Codesandbox example](https://codesandbox.io/p/sandbox/react-riftgate-example-6j3k9u)

# License

Licensed under the MIT License, Copyright © 2023-present Quang Trinh.

See [LICENSE](https://github.com/tkhquang/react-riftgate/blob/main/LICENSE) for more information.