To use these components, you need React Js
or Next Js
configured with Tailwind CSS
atleast. Some components also use Framer Motion
. The dependencies of each Component is listed in their own sections. You can opt to use them after you install those dependencies.
Tech Dependencies:
- Tailwind
- React
Component Dependencies: None
Props for the Button Component
className
- optional. String value passed asclassName
prop will be added to the inner button tag.onClick
To pass the function associated with the button.children
The children component or markup or text to be displayed as the button text.
<Button
className = "bg-red-500
custom-class"
onClick= {()=>{console.log("hello world!")}}
>
Say Hello
</Button>
Tech Dependencies:
-
Tailwind
-
React
Component Dependencies:
-
Button Modal imports Button Component. Keep the Button component in the same directory as the Modal.
Props for the Modal Component
className
- optional. To customize the Modal's inner layout. By default the modal is flexbox and it aligns and justifies the children to center.show
andsetShow
Required. State variable and state handler to control the Modal's visibility.show
should benull
initially.setShow
should set theshow
state to false or true based on whether you want to close or open the modal respectively.
const [show, setShow] = useState(null);
-
btns
- optional. An array of objects. Each object should have three properties:text
,action
,close
. -
children
. Pass in components or markup as the body of the modal.
-
text
: defines the text value displayed in the button tag. -
action
: Function defining the event or action to perform on button click. -
close
: Boolean value to define whether the button will close the modal on click or not.
const btns = [
{
text: 'Hello',
action: ()=>{console.log('hello')},
close: true,
},
{
text: 'Hello',
action: ()=>{console.log('hello')},
close: true,
},
]
By default, you have a button for closing the modal. The objects in the above array will create two more buttons in the footer of the modal.