geoffcox / react-splitter Goto Github PK

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, love your work here. Do you have any guidance on how to implement a 2x2 grid where only the center point is draggable to handle the resizing?

kinda like this:

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:

1. Adding a button (icon) on the top of the splitter line. In this case for auto close/auto open to min/max size.
   Using the renderSplitter prop - prevents calling the onClick handler of the added button.
2. Logic of setting actual size internally, for supporting the above feature.

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.