open-index/open-npm huggingface dataset:
npm package: @sedux/react
Description: React bindings for Sedux state management library.
Author: Navitech Systems
Latest version: 0.1.1

# @sedux/react

React bindings for Sedux state management library.

## Installation

```bash
npm install @sedux/react
# or
yarn add @sedux/react
# or
pnpm add @sedux/react
```

## Usage

```tsx
import { createStore } from '@sedux/core';
import { useStore, useDispatch, useSelector } from '@sedux/react';

// Create your store
const store = createStore({
  // your store configuration
});

// Wrap your app with the store provider
function App() {
  return (
    <StoreProvider store={store}>
      <YourApp />
    </StoreProvider>
  );
}

// Use hooks in your components
function Counter() {
  const count = useSelector((state) => state.counter);
  const dispatch = useDispatch();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>
        Increment
      </button>
    </div>
  );
}
```

## API

### `StoreProvider`

A React component that provides the Sedux store to the component tree.

```tsx
<StoreProvider store={store}>
  <App />
</StoreProvider>
```

### `useStore`

A hook that returns the Sedux store instance.

```tsx
const store = useStore();
```

### `useDispatch`

A hook that returns the dispatch function from the store.

```tsx
const dispatch = useDispatch();
```

### `useSelector`

A hook that allows you to extract data from the store state.

```tsx
const selectedData = useSelector((state) => state.someData);
```

## License

MIT
npm package: @sedux/vue
Description: This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
Author: Navitech Systems
Latest version: 0.0.12

# Vue 3 + TypeScript + Vite

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
npm package: @sedvels/platzom
Description: Una aplicación demo del curso fundamentos de JS de platzi para aprender a crear módulos en NPM
Author: Sergio Velasquez
Latest version: 0.1.0

# MyOwnPlatzom

Platzon es un idioma inventado para el Curso de [Fundamentos de Javascript](https://platzi.com/js) de [Platzi](https://platzi.com), el mejor lugar de educación online.

## Descripción del idioma

- Si la palabra termina con "ar", se le quitan esas dos letras
- Si la palabra inicia con Z, se le añade "pe" al final
- Si la palabra traducida tiene 10 o más letras, se debe partir en dos por la mitad y unir con un guión medio
- Por último, si la palabra original es un palíndromo, ninguna regla anterior cuenta y se devuelve la misma palabra pero intercalando letras mayúsculas y minúsculas



## Instalación

```
npm install platzom
```

## Uso

```
import platzom from 'platzom'

platzom("Programar")	// Program
platzom("Zorro")		// Zorrope
platzom("Zarpar")		// Zarppe
platzom("abecedario")	// abece-dario
patzom("sometemos")		// SoMeTeMoS
```

## Créditos
- [Sergio Velásquez](https://twitter.com/@sedvels)


## Licencia

[MIT](https://opensource.org/licenses/MIT)
npm package: @sedware/block-assemble
Description: An engaging animation to enhance your Angular components.
Author: Shane Edwards
Latest version: 0.0.4

# SedBlockAssemble

An engaging animation to enhance your Angular components.

## Usage
Import the `sed-block-assemble` module into your application or feature module 
after any common modules, libraries or frameworks

```js
import { SedBlockAssembleModule } from '@sedware/block-assemble';

@NgModule({
  ...
  imports: [
    ...
    SedBlockAssembleModule
  ],
  ...
})
export class AppModule { }
```

Use the block assemble animation in your components

```html
<sed-block-assemble>
    Your content/components go here...
</sed-block-assemble>
```

#### Summary
Aside from the typcial Angular dependencies, this component utilises 
the [dom-to-image](https://github.com/tsayen/dom-to-image) plugin to increase 
animation performance.

If you have any issues or would like to contribute, please raise a 
[Github issue](https://github.com/saedwards/sed-block-assemble/issues) or a pull 
request with new changes. If you think the component doesn't quite fit your 
needs and could be improved, you're very welcome to start a discussion about 
new feature requests/changes by raising an issue.
npm package: @sedware/date-picker
Description: A simple date picker component with interactive animation. By default the date picker component will allow you to select any date in the future or past. Use the month dropdown and easily scroll months, years or decades to quickly find the date needed.
Author: Shane Edwards
Latest version: 0.0.2

# Date Picker

A simple date picker component with interactive animation.
By default the date picker component will allow you to select any date in the future or past.
Use the month dropdown and easily scroll months, years or decades to quickly find the date needed. 

## Install
```
npm install @sedware/date-picker
```

## Usage
Import the date picker into your application or feature module after any common modules, libraries or frameowork

```
import { SedDatePickerModule } from '@sedware/date-picker';

@NgModule({
  ...
  imports: [
    ...
    SedDatePickerModule
  ],
  ...
})
export class AppModule { }
```

Use the date picker in your components

```
<sed-date-picker></sed-date-picker>
```

Retrieve the chosen date from a user by binding to the `dateSelected` event

```
<sed-date-picker (dateSelected)="onDateSelected($event);"></sed-date-picker>
```

### Options
- Pass an optional `fromDate` input of native type 
[Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) 
to restrict navigation from a specific date. 

```
<sed-date-picker [fromDate]="fromDate"></sed-date-picker>
```

##Summary
The date picker component scope deliberately excludes the implementation of showing/hiding the date picker.
This should give engineers a lot more flexibility and choice in how the date picker is utilised for different 
applications by not assuming anything about the extrinsic state of the component.

If you have any issues or would like to contribute, please raise a Github 
[issue](https://github.com/saedwards/sed-date-picker/issues) or a PR with new changes.
If you think the component doesn't quite fit your needs and could be improved, you're very welcome to start 
a discussion about new feature requests/changes by raising an issue.
npm package: @sedyain/react-picker-location
Description: A react component to pick a location using google maps
Author: Skye
Latest version: 1.1.4

# react-location-picker
> A react component to pick a location using google maps.

[Demo](https://react-location-picker.netlify.com/)
### Installation
```shell 
npm install react-location-picker --save
```  
or  
```shell 
yarn add react-location-picker --save
```

You need to include google map script in your page.  
`    <script src="https://maps.googleapis.com/maps/api/js?key=<INSERT_API_KEY_HERE>&v=3.exp&libraries=geometry,drawing,places"></script>
`
### Example
```js
import React, { Component } from 'react';
import LocationPicker from 'react-location-picker';

/* Default position */
const defaultPosition = {
  lat: 27.9878,
  lng: 86.9250
};


class LocationPickerExample extends Component {
  constructor (props) {
    super(props);

    this.state = {
      address: "Kala Pattar Ascent Trail, Khumjung 56000, Nepal",
      position: {
         lat: 0,
         lng: 0
      }
    };

    // Bind
    this.handleLocationChange = this.handleLocationChange.bind(this);
  }

  handleLocationChange ({ position, address, places }) {

    // Set new location
    this.setState({ position, address });
  }

  render () {
    return (
      <div>
        <h1>{this.state.address}</h1>
        <div>
          <LocationPicker
            containerElement={ <div style={ {height: '100%'} } /> }
            mapElement={ <div style={ {height: '400px'} } /> }
            defaultPosition={defaultPosition}
            onChange={this.handleLocationChange}
          />
        </div>
      </div>
    )
  }
}
```
### Usage
LocationPicker properties 

| Property | Type | Description |  
|---------------------|-------------------|------------------|  
| containerElement | node | required, A container element for map element|  
| mapElement | node | required, A map element|  
| onChange | function | required, A callback which gets called on every map marker position change, it is passed with one argument of type object which has location information.|
| defaultPosition | object | required, A default position for map center.|
| zoom | number | optional, Map zoom level |
| radius | number | optional, Circle radius in meter. or Pass -1 to hide it.|
| circleOptions | object | optional,  https://developers.google.com/maps/documentation/javascript/3.exp/reference#CircleOptions
  

### Development
For demo, clone this repo and run

Install all dependencies  
`yarn` 

Start  
`yarn start`

Open `http://localhost:8080` in your browser.