Nightly Perpetrated Mischief

    bstate
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    Best Simple Shared State

    Zero dependency. Promise based. Easy learning courve. Only 6.3kb.

    Tutorial

    /state/auth.ts

    import SharedState from 'bstate';
    
    export interface AuthContextState {
        isLogin: boolean;
        username: string;
    }
    
    class AuthContext extends SharedState<AuthContextState> {
        constructor() {
            super()
            this.state = {
                isLogin: false,
                username: '',
            }
        }
    }
    
    export const authContext = new AuthContext();

    Class Components

    /components/login.tsx

    import React from 'react'
    import { authContext, AuthContextState } from '../state/auth'
    
    interface Props {}
    interface State extends AuthContextState {
        password: string;
    }
    
    export default class Login extends React.Component<Props, State> {
        private updateKey: string;
    
        constructor(props: Props) {
            super(props);
    
            this.state = {
                ...authContext.state,
                password: '',
            }
    
            this.updateKey = authContext.append((state) => {
                this.setState({
                    isLogin: state.isLogin,
                    username: state.username,
                })
            })
        }
    
        componentWillUnmount() {
            authContext.pop(this.updateKey)
        }
    
        render() {
            return <></>
        }
        ...
    }

    Functional Components

    /components/login.tsx

    import { useEffect, useState } from 'react'
    import { authContext } from '../state/auth'
    
    export default function Login() {
        const [ isLogin, setIsLogin ] = useState(authContext.state.isLogin)
        const [ username, setUsername ] = useState(authContext.state.username)
        const [ password, setPassword ] = useState('')
    
        useEffect(() => {
            const key = authContext.append((state) => {
                setIsLogin(state.isLogin)
                setUsername(state.username)
            })
    
            return () => authContext.pop(key)
        }, [])
    
        return <></>
    }

    If you need sync only one state key like this.

    import { useEffect, useState } from 'react'
    import { authContext } from '../state/auth'
    
    export default function Login() {
        const [ username, setUsername ] = useState(authContext.state.username)
        const [ password, setPassword ] = useState('')
    
        useEffect(authContext.syncValue('username', setUsername), [])
    
        return <></>
    }

    Now, call setState method of context on anywhere.

    authContext.setState({
        isLogin: true,
        username: 'baealex',
    })

    or

    authContext.setState((prevState) => ({
        ...prevState,
        username: 'aramkim',
    }))

    If you want to handle the state changes. override this methods.

    import SharedState from 'bstate'
    
    export interface AuthContextState {
        isLogin: boolean;
        username: string;
    }
    
    class AuthContext extends SharedState<AuthContextState> {
        constructor() {
            super()
            this.state = {
                isLogin: false,
                username: '',
            }
        }
    
        beforeStateChange() {
            alert('start setState, before state change')
        }
    
        afterStateChange() {
            alert('end setState, after state change')
        }
    }
    
    export const authContext = new AuthContext()

    Keywords

    Install

    npm i bstate

    DownloadsWeekly Downloads

    5

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    12.1 kB

    Total Files

    5

    Last publish

    Collaborators

    • baealex