0
# Custom Store Creation
1

2
The custom store creation capabilities enable isolated progress store instances for complex applications with multiple independent progress bars or specialized progress tracking requirements.
3

4
## Capabilities
5

6
### Create Progress Instance
7

8
Factory function that creates a complete progress instance with isolated store and bound action methods.
9

10
```typescript { .api }
11
/**
12
 * Creates an isolated progress store with bound action methods
13
 * @returns Readonly tuple containing [store, actionsObject]
14
 */
15
function createNprogress(): readonly [NprogressStore, ActionsObject];
16

17
interface ActionsObject {
18
  /** Start automatic progress increments */
19
  start(): void;
20
  /** Stop automatic progress increments */
21
  stop(): void;
22
  /** Reset progress to 0 and hide */
23
  reset(): void;
24
  /** Set progress to specific value */
25
  set(value: number): void;
26
  /** Increment progress by step amount */
27
  increment(): void;
28
  /** Decrement progress by step amount */
29
  decrement(): void;
30
  /** Complete progress with animation */
31
  complete(): void;
32
  /** Cleanup intervals and timeouts */
33
  cleanup(): void;
34
}
35
```
36

37
**Usage Examples:**
38

39
```typescript
40
import { createNprogress } from "@mantine/nprogress";
41

42
// Create isolated progress instance
43
const [uploadStore, uploadActions] = createNprogress();
44
const [downloadStore, downloadActions] = createNprogress();
45

46
// Use different instances for different operations
47
function handleFileUpload() {
48
  uploadActions.start();
49
  // ... upload logic
50
  uploadActions.complete();
51
}
52

53
function handleFileDownload() {
54
  downloadActions.start();
55
  // ... download logic
56
  downloadActions.complete();
57
}
58

59
// React component with isolated store
60
function UploadProgress() {
61
  const state = useNprogress(uploadStore);
62
  
63
  return (
64
    <div>
65
      <NavigationProgress store={uploadStore} color="green" />
66
      <div>Upload Progress: {state.progress}%</div>
67
    </div>
68
  );
69
}
70
```
71

72
### Store-Specific Action Functions
73

74
Action functions that operate on specific store instances for fine-grained control.
75

76
```typescript { .api }
77
/**
78
 * Starts automatic progress increments for the specified store
79
 * @param store - The progress store to control
80
 */
81
function startNavigationProgressAction(store: NprogressStore): void;
82

83
/**
84
 * Stops automatic progress increments for the specified store
85
 * @param store - The progress store to control
86
 */
87
function stopNavigationProgressAction(store: NprogressStore): void;
88

89
/**
90
 * Sets progress to specific value for the specified store
91
 * @param value - Progress value (0-100)
92
 * @param store - The progress store to control
93
 */
94
function setNavigationProgressAction(value: number, store: NprogressStore): void;
95

96
/**
97
 * Increments progress by step amount for the specified store
98
 * @param store - The progress store to control
99
 */
100
function incrementNavigationProgressAction(store: NprogressStore): void;
101

102
/**
103
 * Decrements progress by step amount for the specified store
104
 * @param store - The progress store to control
105
 */
106
function decrementNavigationProgressAction(store: NprogressStore): void;
107

108
/**
109
 * Completes progress with animation for the specified store
110
 * @param store - The progress store to control
111
 */
112
function completeNavigationProgressAction(store: NprogressStore): void;
113

114
/**
115
 * Resets progress and hides for the specified store
116
 * @param store - The progress store to control
117
 */
118
function resetNavigationProgressAction(store: NprogressStore): void;
119

120
/**
121
 * Cleans up intervals and timeouts for the specified store
122
 * @param store - The progress store to control
123
 */
124
function cleanupNavigationProgressAction(store: NprogressStore): void;
125
```
126

127
**Usage Examples:**
128

129
```typescript
130
import { 
131
  createNprogressStore,
132
  startNavigationProgressAction,
133
  completeNavigationProgressAction,
134
  setNavigationProgressAction
135
} from "@mantine/nprogress";
136

137
// Create multiple stores for different purposes
138
const pageLoadStore = createNprogressStore();
139
const dataFetchStore = createNprogressStore();
140
const uploadStore = createNprogressStore();
141

142
// Control each store independently
143
function handlePageLoad() {
144
  startNavigationProgressAction(pageLoadStore);
145
}
146

147
function handleDataFetch() {
148
  startNavigationProgressAction(dataFetchStore);
149
}
150

151
function handleUploadProgress(percentage: number) {
152
  setNavigationProgressAction(percentage, uploadStore);
153
}
154

155
// Complete specific operations
156
function completePageLoad() {
157
  completeNavigationProgressAction(pageLoadStore);
158
}
159
```
160

161
## Advanced Usage Patterns
162

163
### Multi-Stage Progress Tracking
164

165
```typescript
166
import { createNprogress, NavigationProgress } from "@mantine/nprogress";
167

168
// Create separate instances for different stages
169
const [authStore, authActions] = createNprogress();
170
const [dataStore, dataActions] = createNprogress();
171
const [uiStore, uiActions] = createNprogress();
172

173
// Multi-stage application initialization
174
async function initializeApp() {
175
  // Stage 1: Authentication
176
  authActions.start();
177
  await authenticate();
178
  authActions.complete();
179
  
180
  // Stage 2: Data loading
181
  dataActions.start();
182
  await loadInitialData();
183
  dataActions.complete();
184
  
185
  // Stage 3: UI setup
186
  uiActions.start();
187
  await setupUI();
188
  uiActions.complete();
189
}
190

191
// Render progress bars for each stage
192
function AppInitializer() {
193
  return (
194
    <div>
195
      <NavigationProgress store={authStore} color="blue" />
196
      <NavigationProgress store={dataStore} color="green" />
197
      <NavigationProgress store={uiStore} color="orange" />
198
    </div>
199
  );
200
}
201
```
202

203
### Context-Based Progress Management
204

205
```typescript
206
import { createContext, useContext, createNprogress } from "react";
207

208
// Create progress context
209
const ProgressContext = createContext<{
210
  uploadProgress: ReturnType<typeof createNprogress>;
211
  downloadProgress: ReturnType<typeof createNprogress>;
212
} | null>(null);
213

214
// Provider component
215
function ProgressProvider({ children }: { children: React.ReactNode }) {
216
  const uploadProgress = createNprogress();
217
  const downloadProgress = createNprogress();
218
  
219
  return (
220
    <ProgressContext.Provider value={{ uploadProgress, downloadProgress }}>
221
      {children}
222
    </ProgressContext.Provider>
223
  );
224
}
225

226
// Hook to use progress context
227
function useProgressContext() {
228
  const context = useContext(ProgressContext);
229
  if (!context) {
230
    throw new Error("useProgressContext must be used within ProgressProvider");
231
  }
232
  return context;
233
}
234

235
// Usage in components
236
function FileOperations() {
237
  const { uploadProgress, downloadProgress } = useProgressContext();
238
  const [uploadStore, uploadActions] = uploadProgress;
239
  const [downloadStore, downloadActions] = downloadProgress;
240
  
241
  return (
242
    <div>
243
      <NavigationProgress store={uploadStore} color="green" />
244
      <NavigationProgress store={downloadStore} color="blue" />
245
      
246
      <button onClick={() => uploadActions.start()}>
247
        Start Upload
248
      </button>
249
      <button onClick={() => downloadActions.start()}>
250
        Start Download
251
      </button>
252
    </div>
253
  );
254
}
255
```
256

257
### Cleanup and Lifecycle Management
258

259
```typescript
260
import { useEffect, useRef } from "react"; 
261
import { createNprogress } from "@mantine/nprogress";
262

263
function ManagedProgressComponent() {
264
  const progressRef = useRef<ReturnType<typeof createNprogress>>();
265
  
266
  // Initialize progress instance
267
  useEffect(() => {
268
    progressRef.current = createNprogress();
269
    
270
    // Cleanup on unmount
271
    return () => {
272
      if (progressRef.current) {
273
        const [, actions] = progressRef.current;
274
        actions.cleanup();
275
      }
276
    };
277
  }, []);
278
  
279
  const handleStart = () => {
280
    if (progressRef.current) {
281
      const [, actions] = progressRef.current;
282
      actions.start();
283
    }
284
  };
285
  
286
  const handleComplete = () => {
287
    if (progressRef.current) {
288
      const [, actions] = progressRef.current;
289
      actions.complete();
290
    }
291
  };
292
  
293
  return (
294
    <div>
295
      {progressRef.current && (
296
        <NavigationProgress store={progressRef.current[0]} />
297
      )}
298
      <button onClick={handleStart}>Start</button>
299
      <button onClick={handleComplete}>Complete</button>
300
    </div>
301
  );
302
}
303
```
304

305
## Types
306

307
```typescript { .api }
308
/** Actions object returned by createNprogress */
309
interface ActionsObject {
310
  start(): void;
311
  stop(): void;
312
  reset(): void;
313
  set(value: number): void;
314
  increment(): void;
315
  decrement(): void;
316
  complete(): void;
317
  cleanup(): void;
318
}
319

320
/** Return type of createNprogress function */
321
type CreateNprogressResult = readonly [NprogressStore, ActionsObject];
322
```