https://github.com/pshev/amnis-preact

⚛️ Preact bindinds for Amnis
https://github.com/pshev/amnis-preact

amnis bindings effects preact redux

Last synced: 26 days ago
JSON representation

⚛️ Preact bindinds for Amnis

• Host: GitHub
• URL: https://github.com/pshev/amnis-preact
• Owner: pshev
• Created: 2018-02-22T22:02:04.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-03-12T14:12:54.000Z (almost 7 years ago)
• Last Synced: 2024-11-13T19:13:10.858Z (about 2 months ago)
• Topics: amnis, bindings, effects, preact, redux
• Language: JavaScript
• Homepage:
• Size: 43 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        



  Preact bindings for Amnis



## 🔧 Installation

Assuming you use [npm](https://www.npmjs.com/) as your package manager:

```text

npm install --save amnis-preact

```

If you want to experiment and play around with `amnis-preact` without a module bundler or you don't use one - that's OK. 

This package includes precompiled production and development UMD builds. 

You can just drop a UMD build as a `` tag on a page. The UMD builds make `amnisPreact` available as a `window.amnisPreact`.

```html

<script type="application/javascript" src="https://unpkg.com/amnis-preact">

```

You can see a basic example in [this jsFiddle](https://jsfiddle.net/petershev/4y24re0u/).

### Usage

The API has two parts: `Provider` to put [`amnis`](http://npm.im/amnis)' store on the context 

and `connect` higher-order component (HOC) to hook up your [`preact`](http://npm.im/amnis) components with data and actions.

##### Provider

Wrap your root component in a `Provider` to put amnis' `store` on the context. 


```js

import Preact, {h} from 'preact'

import {createStore} from 'amnis'

import {Provider} from 'amnis-preact'

import {Root} from './root'

import {rootReducer} from './reducers'

const store = createStore(rootReducer)

Preact.render((

  

    

  

), document.getElementById('root'))

```

##### connect

`connect` is a simple HOC that is used to hook up your `preact` components with some data from amnis' store and automatically re-render them when that data changes. It is also used to provide event-handlers.




It take only 2 functions:

```js

import {h} from 'preact'

import {connect} from 'amnis-preact'

const CounterApp = ({count, onPlus, onMinus}) =>

  


    
{count}

    +

    -

  


const mapStateToProps = state => ({

  count: state.count

})

const mapDispatchToProps = dispatch => ({

  onPlus: () => dispatch({type: 'INCREMENT'}),

  onMinus: () => dispatch({type: 'DECREMENT'}),

})

export default connect(mapStateToProps, mapDispatchToProps)(CounterApp)

```

## 🙏 License

MIT