open-index/open-npm huggingface dataset:
npm package: @martahilds/docs
Description: This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Latest version: 1.0.0

# React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

```js
export default tseslint.config({
  extends: [
    // Remove ...tseslint.configs.recommended and replace with this
    ...tseslint.configs.recommendedTypeChecked,
    // Alternatively, use this for stricter rules
    ...tseslint.configs.strictTypeChecked,
    // Optionally, add this for stylistic rules
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})
```

You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:

```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config({
  plugins: {
    // Add the react-x and react-dom plugins
    'react-x': reactX,
    'react-dom': reactDom,
  },
  rules: {
    // other rules...
    // Enable its recommended typescript rules
    ...reactX.configs['recommended-typescript'].rules,
    ...reactDom.configs.recommended.rules,
  },
})
```
npm package: @martan-app/widgets-js
Description: JavaScript client for using Martan widgets.
Latest version: 1.1.23

# @martan-app/widgets-js

JavaScript client for using Martan widgets.

## Usage

You can use the library as a normal dependency by installing it via `npm i @martan-app/widgets-js --save`.

Add CSS `import "/node_modules/@martan-app/widgets-js/dist/style.css"
`

### Examples

```javascript
import Martan from '@martan-app/widgets-js'

import "/node_modules/@martan-app/widgets-js/dist/style.css"

// ID of the div that will receive the reviews widget
const $targetId = 'reviews_widget'

// Create widget instance
const martan = new Martan({
  storeId: 124089,
  widgetKey: 'WK_MY_WIDGET_KEY_UNIQUELY_GENERATED_IN_MARTAN_APP_ADMIN'
})

// Initialize reviews widget
const review = martan.reviews($targetId)

// start
review.start()

/*
  // if you need to destroy the widget, like in react

  useEffect(() => {
    review.start()

    // destroy after unmouting
    return () => {
      review.destroy()
    }
  }, [])
*/
reviews.destroy()

// Create widget instance for rating
const rating = martan.average({
  color: '#4caf50',
  fontSize: 20
})

// Initialize widget
rating.start()

// Destroy widget
rating.destroy()
```

Via CDN:
`<script src="https://unpkg.com/@martan-app/widgets-js@1.1.1/dist/martan.umd.js">`

Styles:
`<link href="https://unpkg.com/@martan-app/widgets-js@1.1.1/dist/style.css">`

```javascript
<script type="module">
    // ID of the div that will receive the reviews widget
    const $targetId = 'reviews_widget'

    // Create widget instance
    const martan = new window.Martan({
        storeId: 124089,
        widgetKey: 'WK_MY_WIDGET_KEY_UNIQUELY_GENERATED_IN_MARTAN_APP_ADMIN',
    })

    // Initialize reviews widget
    const reviews = martan.reviews($targetId)
    reviews.start()

    // Create widget instance for rating
    const rating = martan.average({
        color: '#4caf50',
        fontSize: 20
    })

    // Initialize widget
    rating.start()

    // Destroy widget
    rating.destroy()
</script>
```