Open your terminal, navigate to your project, and enter the following command.
npm install baeksulgi
Baeksulgi
is a modal library that uses Context API. To use it, you need to specify the scope in which you want to use the modal.
To use the modal within the desired scope, you have to import the BaeksulgiProvider
and use it.
import { BaeksulgiProvider } from 'baeksulgi';
const MyApp = () => {
return (
<BaeksulgiProvider>
{/* You can use the modal inside the scope */}
</BaeksulgiProvider>
);
};
Please import the Baeksulgi
component where you want to use the modal.
When you open the modal, it will be rendered at the designated location.
import { Baeksulgi } from 'baeksulgi';
const MyComponent = () => {
<Baeksulgi />;
};
Within the scope of BaeksulgiProvider
, you can control Baeksulgi
modal from anywhere! You need to import BaeksulgiContext
to do this.
Currently, you can use four commands in BaeksulgiContext
.
isOpen
- check if theBaeksulgi
modal is open. Returnstrue
orfalse
.content
- You can get what is currently inside theBaeksulgi
modal.openModal(content)
- Use this command to openBaeksulgi
modal, and specify thecontent
which you want to show inside the modal.closeModal()
- Use this command to close the modal. The modal can be closed by clicking on the empty space of the modal without using the command.
import { useContext } from 'react';
import { BaeksulgiContext } from 'baeksulgi';
const MyComponent = () => {
const { isOpen, content, openModal, closeModal } =
useContext(BaeksulgiContext);
{
/* Implement your component, and use the commands here */
}
};
First, let's create a button to open the Baeksulgi
modal.
In this case, we need the openModal()
command, so we can import the BaeksulgiContext
and use it.
Please specify the content that you want to show inside the modal. In this tutorial, we simply used a text with Hello, Baeksulgi!
.
import React from 'react';
import { useContext } from 'react';
import { BaeksulgiContext } from 'baeksulgi';
const Button = () => {
const { openModal } = useContext(BaeksulgiContext);
const helloText = <p>Hello, Baeksulgi!</p>;
return <button onClick={() => openModal(helloText)}>Click me!</button>;
};
export default Button;
Now we have to specify the scope which the Baeksulgi
modal can be used, and implement the Baeksulgi
modal.
We can import BaeksulgiProvider
, and Baeksulgi
to do this.
In this tutorial, we defined the BaeksulgiProvider
to used in App
, and implemented Baeksulgi
modal here.
Don't forget to import your button!
import React from 'react';
import { Baeksulgi, BaeksulgiProvider } from 'baeksulgi';
import Button from './Button';
const App = () => {
return (
<div>
<BaeksulgiProvider>
<Button />
<Baeksulgi />
</BaeksulgiProvider>
</div>
);
};
export default App;