DEV Community

Cover image for Announcement about @laststance/use-app-state
Ryota Murakami
Ryota Murakami

Posted on • Updated on

Announcement about @laststance/use-app-state

Brief

That's it! and about this React library

This is 808byte light weight package for useAppState hook.

Freely pass and receive values between separated components.

codesandbox

Install

npm install @laststance/use-app-state
# or
yarn add @laststance/use-app-state

TypeScript Example

// index.tsx
import React, { ReactElement } from 'react'
import ReactDOM from 'react-dom'
import Provider, { useAppState } from '@laststance/use-app-state'

interface Food {
  id: string
  name: string
}

type FoodList = Food[]

interface AppState {
  FoodList: FoodList
}

let initialAppState: AppState = {
  foodList: []
}

const App = () => {
const [appState, setAppState] = useAppState<AppState>() // pass appState object type as a generics
const item1: Food = {id: 'j4i3t280u', name: 'Hamburger'}
const item2: Food = {id: 'f83ja0j2t', name: 'Fried chicken'}
setAppState({foodList: [item1, item2]})

const foodListView: ReactElement[] = appState.foodList.map((f: Food) => <p key={f.id}>{f}</p>)

return (<div>{foodListView}</div>)
}

ReactDOM.render(
    <Provider initialState={initialAppState}>
      <App>
    </Provider>,
  document.getElementById('root')
)

Edit @laststance/use-app-state Example

Conclusion

You can use it immediately without leaning if you have a common experience as a React developer.

I'm glad to hitting demand this post like who excited prototyping frequency and wanted **setState that regardless component boundary.

Thank you for reading the article, Follow Me! 🐦 and feel free to unsubscribe! πŸ€—

Discussion (0)