DOCSEARCHbyAlgolia
Submit Docs

split

repository·master·Indexed 25 days ago

https://github.com/nathancahill/split

A collection of lightweight, unopinionated utilities for creating resizable split views in web applications. The library includes split-grid for grid-based layouts, grid-template-utils for parsing and updating CSS grid rules, and official React wrappers including react-split and react-split-grid.

Tokens
10.3K
Snippets
22
Records
55
Agent score
91%

What's inside split

  1. Overview of Split utilities

    master

    Split provides unopinionated, lightweight (1-2kb gzipped), and zero-dependency utilities for creating resizable split views. The library focuses on computing view sizes using pure CSS for resizing, avoiding attached window event listeners for high performance.

    Available utilities include:

    • Split.js: The original library for float and flex layouts. Supports all browsers.
    • Split Grid: A successor to Split.js designed for grid layouts. Supports modern browsers.
    • React Split: A thin React wrapper component for Split.js.
    • React Split Grid: A thin React wrapper component for Split Grid.

  4. Create a basic split layout with Split.js

    master

    Initialize a split layout by passing an array of CSS selectors to the Split() function. Gutters are inserted automatically.

    Example: Two elements with specific sizes and minimum width

    Split(['#one', '#two'], {
    sizes: [25, 75],
    minSize: 200,
})

    Example: Three elements with individual minimum widths

    Split(['#one', '#two', '#three'], {
    minSize: [100, 100, 300],
})

    Example: Vertical split

    Split(['#one', '#two'], {
    direction: 'vertical',
})
    Split(['#one', '#two'], {
    sizes: [25, 75],
    minSize: 200,
})

  5. Install Split.js

    master

    You can install Split.js using Yarn or npm, or include it directly via a CDN for browser-based usage.

    Using Package Managers

    Yarn:

    $ yarn add split.js

    npm:

    $ npm install --save split.js

    Using Module Bundlers

    ES6 modules:

    import Split from 'split.js'

    CommonJS modules:

    var Split = require('split.js')

    Using CDN (UMD build)

    unpkg:

    <script src="https://unpkg.com/split.js/dist/split.min.js"></script>

    cdnjs:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.6.0/split.min.js"></script>

    When using the CDN, the library is available on window.Split.

  9. Import grid-template-utils

    master

    Depending on your environment, you can import the library using ES6 modules, CommonJS, or via a UMD script tag.

    If using the UMD build from unpkg, the library is available on window.GridTemplateUtils.

    // using ES6 modules
import { parse, combine, getSizeAtTrack } from 'grid-template-utils'

// using CommonJS modules
var utils = require('grid-template-utils')

// using UMD (HTML)
// <script src="https://unpkg.com/grid-template-utils/dist/grid-template-utils.js"></script>

  11. Use gridTemplateColumns and gridTemplateRows props

    master

    When using gridTemplateColumns or gridTemplateRows props, you must also provide an onDrag handler to update the state of these props as the user drags the gutters. The onDrag callback provides the new gridTemplateStyle string which should be used to update your component's state.

    class Wrapper extends React.Component {
    constructor() {
        super()

        this.state = {
            gridTemplateColumns: '1fr 10px 1fr',
        }

        this.handleDrag = this.handleDrag.bind(this)
    }

    handleDrag(direction, track, style) {
        this.setState({
            gridTemplateColumns: style,
        })
    }

    render() {
        const { gridTemplateColumns } = this.state

        return (
            <Split
                gridTemplateColumns={gridTemplateColumns}
                onDrag={this.handleDrag}
                render={({ getGridProps, getGutterProps }) => (
                    <div {...getGridProps()}>
                        <div />
                        <div {...getGutterProps('column', 1)} />
                        <div />
                    </div>
                )}
            />
        )
    }
}

  12. Migrate from Split.js to Split Grid: Sizes and API

    master

    Split Grid replaces the sizes option and the .getSizes() / .setSizes() methods with direct manipulation of CSS grid properties. Instead of using JavaScript arrays for sizes, use CSS grid-template-columns or grid-template-rows values (e.g., 1fr 10px 1fr).

    • Initial Sizes: Set via CSS or by setting the .style property of the grid element.
    • Getting Sizes: Read the CSS value directly from the element's style.
    • Setting Sizes: Update the CSS value directly on the element's style.