geoffcox / react-splitter Goto Github PK
View Code? Open in Web Editor NEWA resizable splitter for React that the grid templates in CSS rather than complex JavasScript resizing logic.
License: MIT License
A resizable splitter for React that the grid templates in CSS rather than complex JavasScript resizing logic.
License: MIT License
Just thought you might like to see where it's in use.
ReferenceError: window is not defined
This error happened while generating the page
Could the peer dependency please be widened to ^16.9.36 || ^17.0.0
for both react and react-dom?
Hi, is it possible to override the default 'hidden' overflow property in the .react-split .full-content class?
I can't find a way to do it.
Thanks.
I noticed in the Live Demo that splitterSize
requires one to set the splitter type. How can this be done in react.js?
<Split splitterType="solid" splitterSize="50px" initialPrimarySize="70%" defaultSplitterColors={colors}>
</Split>
Error: Property 'splitterType' does not exist on type
Version: 2.1.2
Hello,
I want to add a button for auto close/auto open to min/max size.
Please add an API for:
Regards,
Michael
Hi, I have use Split with 2 heavy components with conditional rendering. Something like:
const entryContainer = (<EntryContainer key="EntryContainerID" />);
const folderContainer = (<FolderContainer key="FolderContainerID" />);
// There is only entryContainer displayed here (its not need split)
if (props.isEntryInFullWidth) {
return entryContainer;
}
return (
<Split
initialPrimarySize={mainSplitSize}
minPrimarySize="250px"
minSecondarySize="250px"
>
{folderContainer}
{entryContainer}
</Split>
In this case if props.isEntryInFullWidth is changed React will unmount entryContainer component: https://medium.com/@cowi4030/optimizing-conditional-rendering-in-react-3fee6b197a20
The only way to optimize rendering is to have on Split props: displayPrimary and displaySecondary in my case:
return (
<Split
initialPrimarySize={mainSplitSize}
minPrimarySize="250px"
minSecondarySize="250px"
displayPrimary={!props.isEntryInFullWidth}
>
{folderContainer}
{entryContainer}
</Split>
This will render the same like this:
if (props.isEntryInFullWidth) {
return entryContainer;
}
here: https://github.com/GeoffCox/react-splitter/blob/master/package/src/Split.tsx#L201
The main goal is to skip double entryContainer in JSX in order to not unmount this component on next rerendering.
Normally the home page of a project (<root>/README.md
) has some relevant information about the project (how to install, all the docs if the library is small, sample code and so on), otherwise, it gives the feeling that it's an unfinished project.
I see that you already did this on NPM but not here.
When you add a value to the drag key, nothing happens. Color and hover work
If you use vertical split and solid splitter the cursor on hover is horizontal instead of vertical.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.