@inspatial/hooks v0.0.2

🚀 InSpatial Hooks

Reality is your canvas

🌟 Welcome to InSpatial Hooks

A collection of custom hooks designed to assist with state management, side effects, and other common reactive/declarative functions.

🌟 Features

• 📦 Custom hooks for state management, side effects, and other common reactive/declarative functions
• 🔗 Seamless integration with Inspatial's ecosystem
• 🚀 Built on top of React's latest features for maximum compatibility and performance
• 🧩 Reusable and customizable for various use cases
• 🛠️ Extendable and maintainable

🛠️ Usage

💡 Step-by-Step Usage Guide

Follow these simple steps to get started with InSpatial Hooks in your React project:

Install InSpatial Hooks:

First, install the package via npm, yarn, pnpm, or bun:

npm install @inspatial/hooks

or

pnpm install @inspatial/hooks

or

yarn add @inspatial/hooks
bun add @inspatial/hooks

1. Import the Hook

Import the desired hook into your component:

import { useCustomHook } from '@inspatial/hooks';

2. Initialize the Hook

Initialize the hook within your functional component:

function MyComponent() {
  const { data, isLoading, error } = useCustomHook();

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error occurred</div>;

  return (
    <div>
      <h1>Data Loaded</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

3. Handle Side Effects

Use the hook to manage side effects effectively:

import { useEffect } from 'react';
import { useAnotherHook } from '@inspatial/hooks';

function MyComponent() {
  const { triggerEffect } = useAnotherHook();

  useEffect(() => {
    triggerEffect();
  }, [triggerEffect]);

  return <div>Effect Triggered</div>;
}

4. Leverage State Management

Integrate with Zustand or XState for state management:

import create from 'zustand';
import { useStateHook } from '@inspatial/hooks';

const useStore = create(set => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
}));

function Counter() {
  const { count, increment } = useStore();
  useStateHook(count);

  return (
    <div>
      <span>{count}</span>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

5. Customize with Configuration

Customize hooks based on your requirements:

import { useConfigurableHook } from '@inspatial/hooks';

function ConfiguredComponent() {
  const config = { optionA: true, optionB: 'value' };
  const { result } = useConfigurableHook(config);

  return <div>{result}</div>;
}

6. Combine Multiple Hooks

Combine multiple hooks for complex logic:

import { useFirstHook, useSecondHook } from '@inspatial/hooks';

function CombinedComponent() {
  const first = useFirstHook();
  const second = useSecondHook();

  return (
    <div>
      <p>First: {first.value}</p>
      <p>Second: {second.value}</p>
    </div>
  );
}

🎉 You're All Set!

You've successfully integrated InSpatial Hooks into your project. Explore more hooks and advanced usage patterns in our documentation.

Install InSpatial Hooks:

npm install @inspatial/hooks

🚀 Getting Started

To begin your journey with InSpatial Core, visit our comprehensive documentation at inspatial.dev.

🤝 Contributing

We welcome contributions from the community! Please read our Contributing Guidelines to get started.

🚀 Release Channels

Choose the release channel that best fits your needs:

📄 License

InSpatial Core is released under the Apache 2.0 License. See the LICENSE file for details.