Comments (4)
👋 @polewskm , sorry for the very late reply. Could you please share a concrete example of what you are trying to do? Why string or HTML string do not cover your needs?
Would it be possible for the message property to be of type ReactNode vs string?
It is not supported by default but you can adapt the library to create a notification (Notification
) with a given a React component (e.g: Notification.messageComponent
), and then you would create your own React Notification
to display such notifications.
from reapop.
Current use-case with message
as string
import React from 'react'
import {useNotifications} from 'reapop'
const AComponent = () => {
// 1. Retrieve the action to create/update a notification.
const {notify} = useNotifications()
useEffect(() => {
// 2. Create a notification.
notify('Welcome to the documentation', 'info')
}, [])
return (
...
)
}
Proposed use-case with message
as ReactNode
import React from 'react'
import {useNotifications} from 'reapop'
const AComponent = () => {
// 1. Retrieve the action to create/update a notification.
const {notify} = useNotifications()
useEffect(() => {
// 2. Create a notification.
notify(<div class='root'><p>Welcome to the documentation</p><p>other content...</p></div>, 'info')
}, [])
return (
...
)
}
The purpose of this is to use native react rendering for HTML content vs unsafe rendering of HTML raw strings via the dangerouslySetInnerHTML
property that you are currently doing.
from reapop.
The purpose of this is to use native react rendering for HTML content vs unsafe rendering of HTML raw strings via the dangerouslySetInnerHTML property that you are currently doing.
<div class='root'><p>Welcome to the documentation</p><p>other content...</p></div>
is JSX and converted to a React element by your JS compiler like babel. React Elements are not serializable, and therefore can't be put stored in Redux. While we could still hack something to make it work for simple components, an HTML string will do the work perfectly. There is nothing wrong with dangerouslySetInnerHTML
attribute as long as you know how to use it. That's why the attribute exists. However, it is marked as dangerous to remind developers that it could be in certain situations and make sure they don't pass any data to it.
The purpose of this library is to propose a simple, yet powerful API but most importantly stable to add notifications to your application. A message as a string fulfills all the use cases this library is built for.
I would suggest building your own custom Notification components and add extra properties to notifications to control/display customized information instead of attempting to store non-serializable (React elements) data in the state of React/Redux.
What these custom notifications would display? In the example you shared, you can replace it with an HTML string but I guess you want to build something more complex with logic into it, right?
from reapop.
@polewskm I'm closing this inactive issue. Please re-open it if needed.
from reapop.
Related Issues (20)
- TypeError: Cannot read property 'filter' of undefined HOT 1
- How do I properly implement onClick for buttons? Noticed button onClick fires when notification is triggered. HOT 2
- Theme - notificationButtons style is not passed to the buttons container
- Undefined payload HOT 7
- Attaching Notification OnClick events to the specific notification HOT 3
- Wrong default class for NotificationIcon HOT 1
- [email protected] doesn't have "dist" folder in it HOT 3
- Mutation detected HOT 4
- Specify Message Tag HOT 2
- Cut a new release on npm HOT 7
- Failed to execute 'animate' on 'Element': Partial keyframes are not supported HOT 4
- IE11 not support HOT 3
- Hydration Mismatch in Next.js v13 HOT 3
- Is sending a notification in one component supposed to rerender parallel components? HOT 3
- Close notification programatically HOT 7
- Promise support for notifications HOT 2
- Problem with useNotifications() while testing HOT 2
- FYI, https://louisbarranqueiro.github.io/reapop/ displays as a blank page as of 2023-10-07 HOT 1
- Theme and Transition not working in demo HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from reapop.