MCPcopy
hub / github.com/iamhosseindhv/notistack

github.com/iamhosseindhv/notistack @v3.0.2 sqlite

repository ↗ · DeepWiki ↗ · release v3.0.2 ↗
131 symbols 291 edges 57 files 4 documented · 3%
README

notistack logo

Notistack: Display notifications with call of a function.

Easy to use, customizable, smooth transitions, stack and queue them up!

Documentation · Examples

npm version npm downloads package license

Table of Contents

Getting Started

Use your preferred package manager:

npm install notistack
yarn add notistack

Version guide

Version Notes
v3.x.x Latest stable release. Standalone (i.e. not dependent on material-ui)
<= v2.0.8 Requires Material-UI v5 as peer dependency. npm install notistack@2.0.8
<= 1.0.10 Requires Material-UI <= v4 as peer dependency. npm install notistack@latest-mui-v4

How to use

Instantiate a SnackbarProvider component and start showing snackbars: (see docs for a full list of available props)

import { SnackbarProvider, enqueueSnackbar } from 'notistack';

const App = () => {
  return (



      <SnackbarProvider />
      <button onClick={() => enqueueSnackbar('That was easy!')}>Show snackbar</button>



  );
};

Alternatively, You can use useSnackbar hook to display Snackbars. Just remember to wrap your app inside of a SnackbarProvider to have access to the hook context:

import { SnackbarProvider, useSnackbar } from 'notistack';

// wrap your app
<SnackbarProvider>
  <App />
  <MyButton />
</SnackbarProvider>

const MyButton = () => {
  const { enqueueSnackbar, closeSnackbar } = useSnackbar();
  return <Button onClick={() => enqueueSnackbar('I love hooks')}>Show snackbar</Button>;
};

Online demo

Visit the documentation website to see all the examples.

Or play with a minimal working example: codesandbox

Contribution

Open an issue and your problem will be solved.

Author - Contact

Hossein Dehnokhalaji

Hossein Dehnokhalaji Instagram profile Hossein Dehnokhalaji Linkedin profile Hossein Dehnokhalaji email address

Extension points exported contracts — how you extend this code

InternalSnackAttributes (Interface)
Properties of the internal snack which should not be exposed to outside world
src/types.ts
ComponentProps (Interface)
(no doc)
src/transitions/getTransitionProps.ts
State (Interface)
(no doc)
src/SnackbarProvider/SnackbarProvider.tsx
SnackbarContainerProps (Interface)
(no doc)
src/SnackbarContainer/SnackbarContainer.tsx
SnackbarItemProps (Interface)
(no doc)
src/SnackbarItem/SnackbarItem.tsx
ReportCompleteProps (Interface)
(no doc)
examples/custom-snackbar-example-2/src/ReportComplete.tsx
TransitionDuration (Interface)
(no doc)
src/types.ts
TransitionPropsReturnType (Interface)
(no doc)
src/transitions/getTransitionProps.ts

Core symbols most depended-on inside this repo

makeStyles
called by 8
src/utils/styles.ts
createTransition
called by 6
src/transitions/createTransition.ts
safeSetState
called by 6
src/transitions/Transition/Transition.tsx
enqueueSnackbar
called by 6
examples/redux-example/App.js
createChainedFunction
called by 5
src/utils/createChainedFunction.ts
is
called by 5
src/SnackbarProvider/merger.ts
getTransitionProps
called by 4
src/transitions/getTransitionProps.ts
setTranslateValue
called by 4
src/transitions/Slide/Slide.tsx

Shape

Function 74
Interface 25
Method 22
Class 10

Languages

TypeScript100%

Modules by API surface

src/transitions/Transition/Transition.tsx20 symbols
src/types.ts15 symbols
src/transitions/Slide/Slide.tsx11 symbols
src/SnackbarProvider/SnackbarProvider.tsx8 symbols
src/transitions/Collapse/Collapse.tsx7 symbols
src/utils/defaultIconVariants.tsx5 symbols
src/SnackbarProvider/merger.ts5 symbols
examples/redux-example/App.js5 symbols
src/SnackbarItem/Snackbar.tsx4 symbols
examples/mobx-example/Notifier.js4 symbols
examples/custom-snackbar-example/src/App.tsx4 symbols
src/utils/index.ts3 symbols

Dependencies from manifests, versioned

@babel/preset-react7.8.3 · 1×
@emotion/reactlatest · 1×
@emotion/styledlatest · 1×
@mui/icons-materiallatest · 1×
@mui/materiallatest · 1×
@mui/styles5.8.4 · 1×
@types/react18.0.9 · 1×
@types/react-dom18.0.3 · 1×
@typescript-eslint/eslint-plugin5.28.0 · 1×
@typescript-eslint/parser5.28.0 · 1×
babel-plugin-optimize-clsx2.6.1 · 1×
clsx1.1.0 · 1×

For agents

$ claude mcp add notistack \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact