https://github.com/allain/react-needs

https://github.com/allain/react-needs

Last synced: 4 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/allain/react-needs
• Owner: allain
• Created: 2018-03-09T15:44:36.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-03-11T18:52:23.000Z (almost 7 years ago)
• Last Synced: 2024-12-21T02:41:33.367Z (28 days ago)
• Language: JavaScript
• Size: 48.8 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-needs

> Simple dependency injection library for react

[![NPM](https://img.shields.io/npm/v/react-needs.svg)](https://www.npmjs.com/package/react-needs)

## Install

```bash

npm install --save react-needs

```

## Example Usage 

```jsx

import React, { Component } from 'react'

import { Scope, Need, Want, Offer } from 'react-needs'

import ObservableState from 'observable-react-state'

class CounterState extends ObservableState {

  state = { count: 0 }

  inc() { this.setState({count: this.state.count + 1})}

}

const counter = new CounterState()

class Example extends Component {

  render () {

    return (

      

        
Need simple value

        {a => 
{a}
}


        
Need a missing value

        {x => 
Should not Be rendered since missing in unmet
}


        
Want a missing value

        {missing => 
Should be rendered since missing in only wanted, not needed.
}


        
Need an observable value (An observable state because it's cool)

        

        {counter =>

          
{counter.state.count}  counter.setState({count: counter.state.count + 1})}>+1
}

        


        

        

      

    )

  }

}

```

## API

### ``

Scope must be installed at the root of your app. Offers only exist within a scope.

### ``

Offer makes a value available within the scope.

### `{val => ...}`

Resolves the value name by looking in the Scope for offers. If no offer is found, it will not render its chidlren.

### `{(name1, name2)=> ...}`

Resolves all values by looking in the Scope for offers. If value cannot be resolved, it will not render its chidlren.

### `{val => ...}`

Resolves the value name by looking in the Scope for offers. If no offer is found, it will not render its chidlren.

### `{(name1, name2)=> ...}`

Resolves all values by looking in the Scope for offers. Renders its chidlren even if some of its wanted values could not be found.

*That's it. Cheers*

## License

ISC © [allain](https://github.com/allain/react-needs)