react-curtain-reveal

Hi! I created this react component since i couldnt find anything similar and wanted to share it with my fellow coders. The main idea is to have a Box which reveals its content onClick with a curtain animation. You can customise quite a lot of it, you can see a documentation of that down below. The react-curtain-reveal depends on the width and height of its Parent, so its easier to make responsive.

Examples

Dependencies

Since we are doing a lot of styling magic i used material-ui´s class generator, this will change in future updates since i think less dependencies are better, but keep this in mind while using it.

Get Started

First just installed the package.

npm install --save react-curtain-reveal

Then just import and use the component. Just keep in mind the height and width fit to the Parent component. If you want to directly size it whithout a Parent, look at the second example please.

<div style={{width:500,height:500}}>
    <CurtainRevealBox>
        <p>content</p>
    </CurtainRevealBox>
</div>

Here an example with custom configurations

<div style={{width:500,height:500}}>
    <CurtainRevealBox
        onReveal={() => { console.log("revealed") }}
        onHide={() => { console.log("hide") }}
        styleConfig={{
            curtain: {
            borderRadius: 0,
 
            },
            leftPanel: {
            background: "linear-gradient(90deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%)"
            },
            rightPanel: {
            background: "linear-gradient(270deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%)"
            },
            content: {
            backgroundColor: "rgba(34,193,195,1)"
            }
        }}
        animationConfig={{
            variant: "linear",
            speed: 5
        }}
        revealCheck={() => {
              return Math.random() <= 0.5;
            }}
        stayHidden={false}
        >
            <p>content</p>
    </CurtainRevealBox>
</div>

Documentation

General

Name	Type	Default	Description
onReveal	function		will be called on succesfull reveal
onHide	function		will be called on successfull hide
revealCheck	function		Will be called to check if the content should be revealed. You can do whatever you want in this function, as long as you return true(show content) or false(dont show content). By default it will allways return true.
isRevealed	boolean	false	on true content will be shown
stayHidden	boolean	true	If false, the user will be able to hide the content again with a click. But this comes with a downside at the moment, the content won´t be clickable or scrollable, since the clickable are stays rendered. I am working on a fix.
animationConfig	object		Animations settings of the curtain reveal/hide. See below for more details.
styleConfig	object		Style settings for the component. See below for more details.

animationConfig

Name	Type	Default	Description
variant	string	"ease-out"	Controlls the transition style of the curtain reveal/hide. Can be one of the following: [ 'ease' , 'linear' , 'ease-in' , 'ease-out' , 'ease-in-out' ].
speed	number	1	Controlls the duration of the reveal/hide animation.

styleConfig

Name	Type	Default	Description
curtain	object		Style of the root curtain box.
leftPanel	object		Style of the left Panel. duh.
rightPanel	object		Style of the right Panel.
content	object		Style of the content box, this is where the children will be displayed.
forbidden	object		The styling of the curtain-box if the content reveal is denied(see checkReveal).

Author

I hope you find this Package usefull. If you find any bugs, things you dislike or even if you want to tell me what you do like feel free to email me at: [e-mail]

License

MIT © chimeralevia