React Context-based Portal
npm install @mutabazia/react-portalbash
npm install --save @mutabazia/react-portal
`
Or with yarn:
`bash
yarn add @mutabazia/react-portal
`
Usage
First, wrap your app with the Portal.Provider.
`tsx
import Portal from '@mutabazia/react-portal';
function App() {
return (
{/ your app code /}
);
}
export default App;
`
Next, you can create a Portal.Placeholder and a corresponding Portal anywhere within your app. The Portal.Placeholder component serves as a placeholder for where you want to insert the portal content. The Portal component is where you define the content to be rendered in the portal.
`tsx
import Portal from '@mutabazia/react-portal';
function Example() {
return (
This will be rendered in the portal!
);
}
export default Example;
`
In the above example, the div within Portal will be rendered inside the Portal.Placeholder with the same id ("myPortal").
You can also customize how the portal content is rendered using the renderItem prop. This function takes the portal content as its argument and should return the customized content.
Here's an example that uses renderItem to wrap the portal content with a ul tag:
`tsx
import Portal from '@mutabazia/react-portal';
function ListPortalExample() {
return (
{items}
} />
Item 1
Item 2
Item 3
);
}
export default ListPortalExample;
``