obsidian

KO | EN

gitlite — search

#python #hacktoberfest #react #golang #android #linux #docker #macos #java #awesome #security #mcp #ios #open-source

(★ 157)

Dependency injection library for TypeScript and React applications

obsidian 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[![SWUbanner](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/banner2-direct.svg)](https://vshymanskyy.github.io/StandWithUkraine)

<p align="center">
  </br><img width="300px" src=".github/logo.svg"></br></br>
    <a href="https://npmjs.com/package/react-obsidian"><img src="https://raw.githubusercontent.com/wix-incubator/obsidian/gh-pages/badges/coverage-jest%20coverage.svg" alt="coverage"></a>
    <a href="https://www.npmjs.com/package/react-obsidian"><img src="https://img.shields.io/npm/dm/react-obsidian.svg" alt="NPM downloads"></a>
    <a href="https://github.com/wix-incubator/react-obsidian/actions/workflows/ci.yml"><img src="https://github.com/wix-incubator/react-obsidian/actions/workflows/ci.yml/badge.svg?branch=master" alt="build status"></a>
    <a href="https://discord.gg/MDH2axwaPy"><img src="https://img.shields.io/badge/chat-discord-blue?style=flat&logo=discord" alt="discord chat"></a>
    </br>
    <a href="https://npmjs.com/package/react-obsidian"><img src="https://img.shields.io/npm/v/react-obsidian.svg" alt="npm package"></a>
    <a href="https://github.com/wix-incubator/obsidian/pull/175"><img src="https://img.shields.io/npm/v/react-obsidian/next.svg" alt="npm package"></a>
    <h1 align="center">Obsidian</h1>
</p>

React Obsidian is a dependency injection framework for React and React Native applications. It allows you to inject dependencies into hooks, components, and classes. Separating the construction and consumption of dependencies is crucial to maintaining a readable and testable codebase.

> 📖 Read more about Dependency Injection and Obsidian in [Breaking complexity with Dependency Injection: Introducing Obsidian](https://guyca.medium.com/breaking-complexity-with-dependency-injection-introducing-obsidian-cd452802f076) on Medium.

* [Documentation](https://wix-incubator.github.io/obsidian/docs/documentation)
  * [Getting Started](https://wix-incubator.github.io/obsidian/docs/documentation/#the-2-steps-tutorial-for-injecting-dependencies-with-obsidian)
  * [Installation](https://wix-incubator.github.io/obsidian/docs/documentation/installation)
  * [Guides](https://wix-incubator.github.io/obsidian/docs/guides/mockDependencies)
* [Chat on Discord](https://discord.gg/MDH2axwaPy)

## Example - Injecting a hook
Obsidian supports injecting hooks, components and classes. The example below shows how to inject a hook.

### Step 1: Declare an object graph
Before we can inject dependencies into hooks, components and classes, we first need to declare our dependencies. Dependencies are declared in classes called "Graphs" where the relationships between the dependencies are outlined.

In the `ApplicationGraph` below, we declare two dependencies:
1. `httpClient`
2. `biLogger`

Both functions are annotated by the `@Provides()` annotation. This signals Obsidian that the results of these functions are provided by the graph and can be injected.

Notice how the `biLogger` function receives an `httpClient` as an argument. This means that `biLogger` is dependent on `httpClient`. Obsidian will create an `httpClient` when `biLogger` is injected.

``` typescript
@singleton() @graph()
class ApplicationGraph extends ObjectGraph {
  @provides()
  httpClient(): HttpClient {
    return new HttpClient();
  }

@provides()
  biLogger(httpClient: HttpClient): BiLogger {
    return new BiLogger(httpClient);
  }
}
```

### Step 2: Inject a dependency

```typescript
type Injected = DependenciesOf<ApplicationGraph, 'biLogger'>; // { biLogger: BiLogger }

interface UseButtonPress {
  usePress: () => void;
}

// We must use destructuring for Obsidian to be able to inject the dependencies
const useButtonClick = ({ biLogger }: Injected): UseButtonPress => {
  const onClick = useCallback(() => {
    biLogger.logButtonClick();
  }, [biLogger]);
  
  return { onClick };
};

// Export the injected hook
export default injectHook(useButtonClick, ApplicationGraph);
```

### Step 3: Use the injected hook
Now that we exported the injected hook, we can use it in a component without needing to provide its dependencies manually.

```tsx
const Component = () => (
  // No need to specify dependencies as they are injected automatically
  const { onClick } = useButtonClick();
  <>
    <button onclick={onClick}>Click Me</button>
  </>
);
```

obsidian

obsidian 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

obsidian

obsidian 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README