https://github.com/alnorris/iota

https://github.com/alnorris/iota

Last synced: 5 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/alnorris/iota
• Owner: alnorris
• License: mit
• Created: 2022-10-04T19:07:20.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2022-10-07T11:53:15.000Z (about 2 years ago)
• Last Synced: 2024-04-26T02:20:30.996Z (7 months ago)
• Language: TypeScript
• Size: 30.3 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 💫 Iota

Manage stateful logic with class methods like the good ol' times, but with reuable hooks.

## Install

```

npm install iota-hook

```

## Quickstart

Create a ususable instance of iota to grab a remote api data via debounce from incoming props

```js

import createIota from 'iota-hook'

import debounce from 'lodash.debounce'

import searchQuery from './searchQuery'

interface LocationSearchProps {

  query: string

}

interface LocationSearchState {

  searchResults: string[]

}

interface LocationCustomMethods = {

  search: (query: string) => Promise

}

interface LocationSearchResults = {

  results: { city: string, country: string }[]

  amount: number

}

const useLocationHook = createIota({

  init: (self) => {

    self.state = { searchResults: [] }

  },

  didUpdate: (self) => {

    const { props, prevProps } = self

    if (props.query !== prevProps.query) {

      self.search(props.query)

    }

  },

  didMount: (self) => {

    self.search = debounce(self.search, 1000)

  },

  search: async (self, arg) => {

    const results = await searchQuery(arg)

    self.setState({ searchResults: results })

  },

  render: (self) => {

    const { state } = self

    return {

      results: state.searchResults.map((location) => {

        const [city, country] = location.split(', ')

        return { city, country }

      }),

      amount: state.searchResults.length

    }

  }

})

```

Then you can reuse this in any component

```js

import useLocationHook from './useLocationHook'

function App () {

  const [searchText, setSearchText] = React.useState('')

  const data = useLocationHook({ query: searchText })

  console.log({ data }) // data is data created from render method in iota hook

  return (

    


       setSearchText(e.target.value)} />

    

  )

}

```