open-index/open-npm huggingface dataset:
npm package: @samelogic/microsurveys
Description: This library was generated with [Nx](https://nx.dev).
Latest version: 0.0.1

# surveys-ui-microsurveys

This library was generated with [Nx](https://nx.dev).

## Running unit tests

Run `nx test surveys-ui-microsurveys` to execute the unit tests via [Jest](https://jestjs.io).
npm package: @samelogic/react-microsurvey
Description: <p align="center">   Microsurvey components for react   <br /><br />   <a href="https://github.com/Samelogic/react-microsurvey/actions/workflows/ci.yml">     <img src="https://github.com/Samelogic/react-microsurvey/actions/workflows/ci.yml/badge.svg?branc
Latest version: 0.10.13

<p align="center">
  Microsurvey components for react
  <br /><br />
  <a href="https://github.com/Samelogic/react-microsurvey/actions/workflows/ci.yml">
    <img src="https://github.com/Samelogic/react-microsurvey/actions/workflows/ci.yml/badge.svg?branch=main" />
  </a>
  <a href="https://www.npmjs.com/package/@samelogic/react-microsurvey">
    <img src="https://badgen.net/npm/v/@samelogic/react-microsurvey" />
  </a>
  <a href="https://www.npmjs.com/package/@samelogic/react-microsurvey">
    <img src="https://badgen.net/npm/dw/@samelogic/react-microsurvey" />
  </a>
  <a href="https://github.com/Samelogic/react-microsurvey/blob/main/LICENSE">
    <img src="https://badgen.net/npm/license/@samelogic/react-microsurvey" />
  </a>
  <a href="https://bundlephobia.com/result?p=@samelogic/react-microsurvey">
    <img src="https://badgen.net/bundlephobia/minzip/@samelogic/react-microsurvey">
  </a>
</p>

---

React Microsuvey is a modular survey component library that leverages react and material-ui to provide survey input components that is unobtrusive to the user to collect both qualitative and quantitative feedback. This is the component system used by [Samelogic](https://samelogic.com) Microsurveys.

## 🚀 Quick Links

- Learn more in the [docs](https://samelogic.com/docs)
- Explore the library on [Chromatic](https://www.chromatic.com/library?appId=602346407720a90023cbc3d2)

## ✨ Features

Survey features include:

### Fields/Question types

Each field type includes its own editor and input component.

- Long Text
- Multiple Choice

Additional features

- Element Popup (survey modal pops up beside interacted element)

## 📦 Install

To use `@samelogic/react-microsurvey` in your project, install it via npm/yarn:

```
npm i @samelogic/react-microsurvey --save
```

then import the survey component into your JSX element:

```jsx
import { Microsurvey } from '@samelogic/react-microsurvey'

const form = {}

const ref = useRef()

const App = () => <Microsurvey form={form} ref={ref} />
```

## Development

Use NPM. `npm i` for setup.

### Release

Releasing is done by github actions when a release is created on github.
npm package: @samelogic/react-microsurveys
Description: This is the main entry-point to the Samelogic Microsurvey client and editor UI components.
Latest version: 0.9.1

# @samelogic/react-microsurveys

This is the main entry-point to the Samelogic Microsurvey client and editor UI components.

Built on react and mui.

# Usage

## `MicrosurveysClient`

```tsx
import { Form, MicrosurveyClient } from '@samelogic/react-microsurveys';

export interface PlaygroundProps {
  form: Form;
}

export const Playground: React.FC<MicrosurveyEditorProps> = ({ form }) => {
  return (
    <Grid container>
      <Grid item xs={6}>
        <Editor />
      </Grid>
      <Grid item xs={6}>
        <MicrosurveyClient form={form} />
      </Grid>
    </Grid>
  );
};
```