2.1.40 • Published 1 year ago

react-tab-set v2.1.40

Weekly downloads
5
License
ISC
Repository
github
Last release
1 year ago

react-tab-set

A React component for rendering tabbed content.

<TabSet selectedTab='one'>
  <TabGroup>
    <Tab tab='one'>
      One
    </Tab>
    <Tab tab='two'>
      Two
    </Tab>
  </TabGroup>
  <TabPanel tab='one'>
    One
  </TabPanel>
  <TabPanel tab='two'>
    Two
  </TabPanel>
</TabSet>

The <TabSet /> component manages state, and applies additional props to the <Tab /> and <TabPanel /> components.

TabSet

Rendered as a <div /> the <TabSet /> component can contain or be contained by an valid children or parent.

A <TabSet /> has one prop, selectedTab. The value of that prop should be the same as the tab prop of a <Tab /> and its paired <TabPanel />.

TabGroup and Tab

A <TabGroup /> contains <Tab /> components.

These are rendered as <ul/> and <li /> elements, respectively; there should be no elements between them.

A <TabGroup /> has no props.

Each <Tab /> component has one prop, tab. The value of that prop pairs with the tab prop of a <TabPanel /> component (such that when a <Tab /> is selected with a click, its paired <TabPanel /> is rendered).

TabPanel

A <TabPanel /> is a container for content.

Content can be declared either as children or as the return of a function assigned to its prop render.

If your component extends PureComponent or is presentational, you might prefer to declare content as children.

Otherwise, you can assign a function to the render prop, so that rendering is deferred until the tab is selected.

Content as children

  <TabPanel tab='identifier'>
    <div className='content'>
      Content
    </div>
  </TabPanel>

Content as return

  <TabPanel tab='identifier' render={() => (
    <div className='content'>
      Content
    </div>
  )} />

(Notice that in this case there is no closing tag; if there were, children would be ignored in favour of the return from the function, anyway.)

Presentational elements

A <TabPanel /> component can contain or be contained by an valid children or parent, just like a <TabSet />.

<TabSet selectedTab='one'>
  { /*
    Etc.
  */ }
  <div className='a'>
    <div className='b'>
      <div className='c'>
        <TabPanel tab='one'>
          One
        </TabPanel>
      </div>
    </div>
  </div>
  <TabPanel tab='two' render={() => {
    return 'Two'
  }} />
</TabSet>

Similarly, they can be declared in any combination.

Demonstrating react-tab-set

Example Storybooks are available.

Clone the repository, then:

npm install
npm run storybook

And with your preferred browser visit http://localhost:6006.

debuguuid
@everything-registry/sub-chunk-2616@zalastax/nolb-react-ta
2.1.2

2 years ago

2.1.1

2 years ago

2.1.4

2 years ago

2.1.3

2 years ago

2.1.6

2 years ago

2.1.5

2 years ago

2.1.8

2 years ago

2.1.7

2 years ago

2.1.0

2 years ago

2.1.16

1 year ago

2.1.17

1 year ago

2.1.14

1 year ago

2.1.15

1 year ago

2.1.12

1 year ago

2.1.13

1 year ago

2.1.10

2 years ago

2.1.11

1 year ago

2.1.18

1 year ago

2.1.19

1 year ago

2.1.27

1 year ago

2.1.28

1 year ago

2.1.25

1 year ago

2.1.26

1 year ago

2.1.23

1 year ago

2.1.24

1 year ago

2.1.21

1 year ago

2.1.22

1 year ago

2.1.20

1 year ago

2.1.29

1 year ago

2.1.38

1 year ago

2.1.39

1 year ago

2.1.36

1 year ago

2.1.37

1 year ago

2.1.34

1 year ago

2.1.35

1 year ago

2.1.32

1 year ago

2.1.33

1 year ago

2.1.30

1 year ago

2.1.31

1 year ago

2.1.40

1 year ago

2.1.9

2 years ago

2.0.209

2 years ago

2.0.208

2 years ago

2.0.213

2 years ago

2.0.212

2 years ago

2.0.211

2 years ago

2.0.210

2 years ago

2.0.207

2 years ago

2.0.206

2 years ago

2.0.205

2 years ago

2.0.204

2 years ago

2.0.203

2 years ago

2.0.202

2 years ago

2.0.201

2 years ago

2.0.200

2 years ago

2.0.199

2 years ago

2.0.198

2 years ago

2.0.197

2 years ago

2.0.196

2 years ago

2.0.195

2 years ago

2.0.194

2 years ago

2.0.191

2 years ago

2.0.190

2 years ago

2.0.193

2 years ago

2.0.192

2 years ago

2.0.179

2 years ago

2.0.178

2 years ago

2.0.177

2 years ago

2.0.176

2 years ago

2.0.175

2 years ago

2.0.174

2 years ago

2.0.173

2 years ago

2.0.172

2 years ago

2.0.171

2 years ago

2.0.170

2 years ago

2.0.180

2 years ago

2.0.189

2 years ago

2.0.188

2 years ago

2.0.187

2 years ago

2.0.186

2 years ago

2.0.185

2 years ago

2.0.184

2 years ago

2.0.183

2 years ago

2.0.182

2 years ago

2.0.181

2 years ago

2.0.169

2 years ago

2.0.168

2 years ago

2.0.167

2 years ago

2.0.166

2 years ago

2.0.165

2 years ago

2.0.164

2 years ago

2.0.163

2 years ago

2.0.159

2 years ago

2.0.158

2 years ago

2.0.157

2 years ago

2.0.156

2 years ago

2.0.155

2 years ago

2.0.154

2 years ago

2.0.153

2 years ago

2.0.152

2 years ago

2.0.151

2 years ago

2.0.150

2 years ago

2.0.162

2 years ago

2.0.161

2 years ago

2.0.160

2 years ago

2.0.139

2 years ago

2.0.138

2 years ago

2.0.137

2 years ago

2.0.136

2 years ago

2.0.135

2 years ago

2.0.134

2 years ago

2.0.133

2 years ago

2.0.132

2 years ago

2.0.131

2 years ago

2.0.130

2 years ago

2.0.149

2 years ago

2.0.148

2 years ago

2.0.147

2 years ago

2.0.146

2 years ago

2.0.145

2 years ago

2.0.144

2 years ago

2.0.143

2 years ago

2.0.142

2 years ago

2.0.141

2 years ago

2.0.140

2 years ago

2.0.119

2 years ago

2.0.118

2 years ago

2.0.117

2 years ago

2.0.116

2 years ago

2.0.115

2 years ago

2.0.114

2 years ago

2.0.113

2 years ago

2.0.112

2 years ago

2.0.111

2 years ago

2.0.129

2 years ago

2.0.128

2 years ago

2.0.127

2 years ago

2.0.126

2 years ago

2.0.125

2 years ago

2.0.124

2 years ago

2.0.123

2 years ago

2.0.122

2 years ago

2.0.121

2 years ago

2.0.120

2 years ago

2.0.110

2 years ago

2.0.109

2 years ago

2.0.108

2 years ago

2.0.107

2 years ago

2.0.106

2 years ago

2.0.105

2 years ago

2.0.104

2 years ago

2.0.103

2 years ago

2.0.102

2 years ago

2.0.101

2 years ago

2.0.100

2 years ago

2.0.99

2 years ago

2.0.97

2 years ago

2.0.98

2 years ago

2.0.96

2 years ago

2.0.95

2 years ago

2.0.94

2 years ago

2.0.93

2 years ago

2.0.92

2 years ago

2.0.91

2 years ago

2.0.90

2 years ago

2.0.88

2 years ago

2.0.89

2 years ago

2.0.87

2 years ago

2.0.86

2 years ago

2.0.85

2 years ago

2.0.84

2 years ago

2.0.83

2 years ago

2.0.82

2 years ago

2.0.81

2 years ago

2.0.80

2 years ago

2.0.79

2 years ago

2.0.77

2 years ago

2.0.78

2 years ago

2.0.75

2 years ago

2.0.76

2 years ago

2.0.74

2 years ago

2.0.73

2 years ago

2.0.72

2 years ago

2.0.71

2 years ago

2.0.65

2 years ago

2.0.64

2 years ago

2.0.63

2 years ago

2.0.62

2 years ago

2.0.61

2 years ago

2.0.59

2 years ago

2.0.60

2 years ago

2.0.58

2 years ago

2.0.57

2 years ago

2.0.55

2 years ago

2.0.56

2 years ago

2.0.54

2 years ago

2.0.53

2 years ago

2.0.51

2 years ago

2.0.52

2 years ago

2.0.50

2 years ago

2.0.49

2 years ago

2.0.48

2 years ago

2.0.47

2 years ago

2.0.46

2 years ago

2.0.44

3 years ago

2.0.45

3 years ago

2.0.15

3 years ago

2.0.16

3 years ago

2.0.13

3 years ago

2.0.14

3 years ago

2.0.11

3 years ago

2.0.12

3 years ago

2.0.10

3 years ago

2.0.19

3 years ago

2.0.17

3 years ago

2.0.18

3 years ago

2.0.26

3 years ago

2.0.27

3 years ago

2.0.24

3 years ago

2.0.25

3 years ago

2.0.22

3 years ago

2.0.23

3 years ago

2.0.20

3 years ago

2.0.21

3 years ago

2.0.28

3 years ago

2.0.29

3 years ago

2.0.37

3 years ago

2.0.38

3 years ago

2.0.35

3 years ago

2.0.36

3 years ago

2.0.33

3 years ago

2.0.34

3 years ago

2.0.31

3 years ago

2.0.32

3 years ago

2.0.30

3 years ago

2.0.39

3 years ago

2.0.42

3 years ago

2.0.43

3 years ago

2.0.40

3 years ago

2.0.41

3 years ago

2.0.7

3 years ago

2.0.6

3 years ago

2.0.9

3 years ago

2.0.8

3 years ago

1.1.441

3 years ago

1.1.440

3 years ago

1.2.0

3 years ago

1.2.4

3 years ago

1.2.3

3 years ago

1.2.2

3 years ago

1.2.1

3 years ago

2.0.3

3 years ago

2.0.2

3 years ago

2.0.5

3 years ago

2.0.4

3 years ago

2.0.1

3 years ago

2.0.0

3 years ago

1.1.419

3 years ago

1.1.418

3 years ago

1.1.417

3 years ago

1.1.427

3 years ago

1.1.426

3 years ago

1.1.425

3 years ago

1.1.424

3 years ago

1.1.423

3 years ago

1.1.422

3 years ago

1.1.421

3 years ago

1.1.420

3 years ago

1.1.409

3 years ago

1.1.408

3 years ago

1.1.407

3 years ago

1.1.406

3 years ago

1.1.416

3 years ago

1.1.415

3 years ago

1.1.414

3 years ago

1.1.413

3 years ago

1.1.412

3 years ago

1.1.411

3 years ago

1.1.410

3 years ago

1.1.439

3 years ago

1.1.429

3 years ago

1.1.428

3 years ago

1.1.430

3 years ago

1.1.438

3 years ago

1.1.437

3 years ago

1.1.436

3 years ago

1.1.435

3 years ago

1.1.434

3 years ago

1.1.433

3 years ago

1.1.432

3 years ago

1.1.431

3 years ago

1.1.389

3 years ago

1.1.388

3 years ago

1.1.397

3 years ago

1.1.396

3 years ago

1.1.395

3 years ago

1.1.394

3 years ago

1.1.393

3 years ago

1.1.392

3 years ago

1.1.391

3 years ago

1.1.390

3 years ago

1.1.399

3 years ago

1.1.398

3 years ago

1.1.405

3 years ago

1.1.404

3 years ago

1.1.403

3 years ago

1.1.402

3 years ago

1.1.401

3 years ago

1.1.400

3 years ago

1.1.342

3 years ago

1.1.341

3 years ago

1.1.340

3 years ago

1.1.348

3 years ago

1.1.347

3 years ago

1.1.346

3 years ago

1.1.345

3 years ago

1.1.344

3 years ago

1.1.343

3 years ago

1.1.329

3 years ago

1.1.331

3 years ago

1.1.330

3 years ago

1.1.339

3 years ago

1.1.338

3 years ago

1.1.337

3 years ago

1.1.336

3 years ago

1.1.335

3 years ago

1.1.334

3 years ago

1.1.333

3 years ago

1.1.332

3 years ago

1.1.364

3 years ago

1.1.360

3 years ago

1.1.369

3 years ago

1.1.368

3 years ago

1.1.367

3 years ago

1.1.366

3 years ago

1.1.365

3 years ago

1.1.353

3 years ago

1.1.352

3 years ago

1.1.351

3 years ago

1.1.350

3 years ago

1.1.359

3 years ago

1.1.358

3 years ago

1.1.357

3 years ago

1.1.356

3 years ago

1.1.355

3 years ago

1.1.354

3 years ago

1.1.306

3 years ago

1.1.305

3 years ago

1.1.304

3 years ago

1.1.303

3 years ago

1.1.302

3 years ago

1.1.301

3 years ago

1.1.300

3 years ago

1.1.319

3 years ago

1.1.318

3 years ago

1.1.320

3 years ago

1.1.328

3 years ago

1.1.327

3 years ago

1.1.326

3 years ago

1.1.325

3 years ago

1.1.324

3 years ago

1.1.323

3 years ago

1.1.322

3 years ago

1.1.321

3 years ago

1.1.309

3 years ago

1.1.308

3 years ago

1.1.307

3 years ago

1.1.317

3 years ago

1.1.316

3 years ago

1.1.315

3 years ago

1.1.314

3 years ago

1.1.313

3 years ago

1.1.312

3 years ago

1.1.311

3 years ago

1.1.310

3 years ago

1.1.290

3 years ago

1.1.298

3 years ago

1.1.297

3 years ago

1.1.296

3 years ago

1.1.295

3 years ago

1.1.294

3 years ago

1.1.293

3 years ago

1.1.292

3 years ago

1.1.291

3 years ago

1.1.299

3 years ago

1.1.386

3 years ago

1.1.385

3 years ago

1.1.384

3 years ago

1.1.383

3 years ago

1.1.382

3 years ago

1.1.381

3 years ago

1.1.380

3 years ago

1.1.387

3 years ago

1.1.375

3 years ago

1.1.374

3 years ago

1.1.373

3 years ago

1.1.372

3 years ago

1.1.371

3 years ago

1.1.370

3 years ago

1.1.379

3 years ago

1.1.378

3 years ago

1.1.377

3 years ago

1.1.376

3 years ago

1.1.287

3 years ago

1.1.286

3 years ago

1.1.285

3 years ago

1.1.284

3 years ago

1.1.283

3 years ago

1.1.282

3 years ago

1.1.281

3 years ago

1.1.280

3 years ago

1.1.289

3 years ago

1.1.288

3 years ago

1.1.276

3 years ago

1.1.275

3 years ago

1.1.274

3 years ago

1.1.273

3 years ago

1.1.272

3 years ago

1.1.279

3 years ago

1.1.278

3 years ago

1.1.277

3 years ago

1.1.219

4 years ago

1.1.221

4 years ago

1.1.220

4 years ago

1.1.229

4 years ago

1.1.228

4 years ago

1.1.227

4 years ago

1.1.226

4 years ago

1.1.225

4 years ago

1.1.224

4 years ago

1.1.223

4 years ago

1.1.222

4 years ago

1.1.210

4 years ago

1.1.218

4 years ago

1.1.217

4 years ago

1.1.216

4 years ago

1.1.215

4 years ago

1.1.214

4 years ago

1.1.213

4 years ago

1.1.212

4 years ago

1.1.211

4 years ago

1.1.243

4 years ago

1.1.242

4 years ago

1.1.241

4 years ago

1.1.240

4 years ago

1.1.249

4 years ago

1.1.248

4 years ago

1.1.247

4 years ago

1.1.246

4 years ago

1.1.245

4 years ago

1.1.244

4 years ago

1.1.232

4 years ago

1.1.231

4 years ago

1.1.230

4 years ago

1.1.239

4 years ago

1.1.238

4 years ago

1.1.237

4 years ago

1.1.236

4 years ago

1.1.235

4 years ago

1.1.234

4 years ago

1.1.233

4 years ago

1.1.265

3 years ago

1.1.264

3 years ago

1.1.263

3 years ago

1.1.262

3 years ago

1.1.261

3 years ago

1.1.260

3 years ago

1.1.269

3 years ago

1.1.268

3 years ago

1.1.267

3 years ago

1.1.266

3 years ago

1.1.254

4 years ago

1.1.253

4 years ago

1.1.252

4 years ago

1.1.251

4 years ago

1.1.250

4 years ago

1.1.259

3 years ago

1.1.258

3 years ago

1.1.257

4 years ago

1.1.256

4 years ago

1.1.255

4 years ago

1.1.271

3 years ago

1.1.270

3 years ago

1.1.209

4 years ago

1.1.208

4 years ago

1.1.207

4 years ago

1.1.206

4 years ago

1.1.205

4 years ago

1.1.204

4 years ago

1.1.203

4 years ago

1.1.202

4 years ago

1.1.201

4 years ago

1.1.200

4 years ago

1.1.199

4 years ago

1.1.198

4 years ago

1.1.180

4 years ago

1.1.188

4 years ago

1.1.187

4 years ago

1.1.186

4 years ago

1.1.185

4 years ago

1.1.184

4 years ago

1.1.183

4 years ago

1.1.182

4 years ago

1.1.181

4 years ago

1.1.189

4 years ago

1.1.177

4 years ago

1.1.176

4 years ago

1.1.175

4 years ago

1.1.174

4 years ago

1.1.173

4 years ago

1.1.172

4 years ago

1.1.171

4 years ago

1.1.170

4 years ago

1.1.179

4 years ago

1.1.178

4 years ago

1.1.191

4 years ago

1.1.190

4 years ago

1.1.197

4 years ago

1.1.196

4 years ago

1.1.195

4 years ago

1.1.194

4 years ago

1.1.193

4 years ago

1.1.192

4 years ago

1.1.169

4 years ago

1.1.168

4 years ago

1.1.166

4 years ago

1.1.165

4 years ago

1.1.164

4 years ago

1.1.167

4 years ago

1.1.129

4 years ago

1.1.144

4 years ago

1.1.143

4 years ago

1.1.142

4 years ago

1.1.141

4 years ago

1.1.140

4 years ago

1.1.149

4 years ago

1.1.148

4 years ago

1.1.147

4 years ago

1.1.146

4 years ago

1.1.145

4 years ago

1.1.133

4 years ago

1.1.132

4 years ago

1.1.131

4 years ago

1.1.130

4 years ago

1.1.139

4 years ago

1.1.138

4 years ago

1.1.137

4 years ago

1.1.136

4 years ago

1.1.135

4 years ago

1.1.134

4 years ago

1.1.163

4 years ago

1.1.162

4 years ago

1.1.161

4 years ago

1.1.160

4 years ago

1.1.155

4 years ago

1.1.154

4 years ago

1.1.153

4 years ago

1.1.152

4 years ago

1.1.151

4 years ago

1.1.150

4 years ago

1.1.159

4 years ago

1.1.158

4 years ago

1.1.157

4 years ago

1.1.156

4 years ago

1.1.128

4 years ago

1.1.127

4 years ago

1.1.126

4 years ago

1.1.125

4 years ago

1.1.124

4 years ago

1.1.100

4 years ago

1.1.108

4 years ago

1.1.107

4 years ago

1.1.106

4 years ago

1.1.105

4 years ago

1.1.104

4 years ago

1.1.103

4 years ago

1.1.102

4 years ago

1.1.101

4 years ago

1.1.122

4 years ago

1.1.92

4 years ago

1.1.121

4 years ago

1.1.91

4 years ago

1.1.120

4 years ago

1.1.90

4 years ago

1.1.96

4 years ago

1.1.95

4 years ago

1.1.94

4 years ago

1.1.93

4 years ago

1.1.99

4 years ago

1.1.98

4 years ago

1.1.97

4 years ago

1.1.123

4 years ago

1.1.109

4 years ago

1.1.111

4 years ago

1.1.110

4 years ago

1.1.119

4 years ago

1.1.118

4 years ago

1.1.117

4 years ago

1.1.116

4 years ago

1.1.115

4 years ago

1.1.114

4 years ago

1.1.113

4 years ago

1.1.112

4 years ago

1.1.70

5 years ago

1.1.74

5 years ago

1.1.73

5 years ago

1.1.72

5 years ago

1.1.71

5 years ago

1.1.78

4 years ago

1.1.76

4 years ago

1.1.75

5 years ago

1.1.79

4 years ago

1.1.81

4 years ago

1.1.80

4 years ago

1.1.85

4 years ago

1.1.84

4 years ago

1.1.83

4 years ago

1.1.82

4 years ago

1.1.89

4 years ago

1.1.88

4 years ago

1.1.87

4 years ago

1.1.86

4 years ago

1.1.63

5 years ago

1.1.62

5 years ago

1.1.67

5 years ago

1.1.66

5 years ago

1.1.65

5 years ago

1.1.64

5 years ago

1.1.69

5 years ago

1.1.68

5 years ago

1.1.41

5 years ago

1.1.40

5 years ago

1.1.45

5 years ago

1.1.44

5 years ago

1.1.43

5 years ago

1.1.42

5 years ago

1.1.49

5 years ago

1.1.48

5 years ago

1.1.47

5 years ago

1.1.46

5 years ago

1.1.52

5 years ago

1.1.51

5 years ago

1.1.50

5 years ago

1.1.56

5 years ago

1.1.55

5 years ago

1.1.54

5 years ago

1.1.53

5 years ago

1.1.59

5 years ago

1.1.58

5 years ago

1.1.57

5 years ago

1.1.61

5 years ago

1.1.60

5 years ago

1.1.30

5 years ago

1.1.34

5 years ago

1.1.33

5 years ago

1.1.32

5 years ago

1.1.31

5 years ago

1.1.38

5 years ago

1.1.37

5 years ago

1.1.36

5 years ago

1.1.35

5 years ago

1.1.39

5 years ago

1.1.29

5 years ago

1.1.28

5 years ago

1.1.27

5 years ago

1.1.26

5 years ago

1.1.25

5 years ago

1.1.24

5 years ago

1.1.12

5 years ago

1.1.11

5 years ago

1.1.16

5 years ago

1.1.15

5 years ago

1.1.14

5 years ago

1.1.13

5 years ago

1.1.19

5 years ago

1.1.18

5 years ago

1.1.17

5 years ago

1.1.23

5 years ago

1.1.22

5 years ago

1.1.21

5 years ago

1.1.20

5 years ago

1.1.9

5 years ago

1.1.10

5 years ago

1.1.8

5 years ago

1.1.7

5 years ago

1.1.6

5 years ago

1.1.5

6 years ago

1.1.4

6 years ago

1.1.3

6 years ago

1.1.2

6 years ago

1.1.1

6 years ago

1.1.0

6 years ago

1.0.11

6 years ago

1.0.10

6 years ago

1.0.9

6 years ago

1.0.8

7 years ago

1.0.7

7 years ago

1.0.6

7 years ago

1.0.5

7 years ago

1.0.4

7 years ago

1.0.3

7 years ago

0.0.9

9 years ago

0.0.8

9 years ago

0.0.7

9 years ago

0.0.6

9 years ago

0.0.5

9 years ago

0.0.4

9 years ago

0.0.3

9 years ago

0.0.2

9 years ago

0.0.1

9 years ago