Coder Social home page Coder Social logo

ctxhou / react-poppop Goto Github PK

View Code? Open in Web Editor NEW
80.0 5.0 8.0 267 KB

A mobile support and multi-directional modal for ReactJS

Home Page: https://ctxhou.github.io/react-poppop/

JavaScript 100.00%
react modal dialog popup react-poppop responsive mobile react-modal

react-poppop's Issues

change react-tappable

Because react-tappable currently doesn't support react v16, need to use other method to support touch event.

Cannot read property 'injection' of undefined 

injectTapEventPlugin
https://ovkn502kp5.codesandbox.io/node_modules/react-tap-event-plugin/src/injectTapEventPlugin.js:23:89
evaluate
https://ovkn502kp5.codesandbox.io/node_modules/react-poppop/lib/poppop.js:43:35

How to style?

Hey,
Thanks for the repo.

How can I apply styles so I can change how the popup looks like?

Tried this:

        <PopPop position="centerCenter"
                open={true}
                closeBtn={false}
                closeOnEsc={false}
                closeOnOverlay={false}
                
                style={{  
                    backdropFilter: "blur(10px)",
                    backgroundColor: "transparent",
                    boxShadow: "none",
                    display: "flex", 
                    flexDirection: "column",
                    alignItems: "center"
                        }}

                >

               <h1> Test 123 </h1>
        </PopPop>

But it does not have any effect.

How to style wrapper ?

Hi,

I want to use this library as a right sidebar.

I have a problem because the wrapper has a 20px padding.

How can I remove this padding ? Can I add className to the popupcomponent ?

Thank you

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.