0.0.98 • Published 1 year ago

react-semaphor v0.0.98

Weekly downloads
-
License
MIT
Repository
-
Last release
1 year ago

Integrating dashboard into your React app is a straightforward three-step process.

1) Install Semaphor Package

Open your terminal in your project directory and run the following command. This command installs the semaphor package and adds it to your project dependencies.

npm i semaphor

2) Get Auth Token

Before rendering the Dashboard, first acquire the AuthToken. This token enhances the security of your dashboard by restricting access to only users with the token. Make a POST fetch call as shown below.

const DASHBOARD_ID = 'd_cf007a8b-19bc-46ad-8787-2915445b7b86'; // Replace with your actual dashboard ID
const DASHBOARD_SECRET = 'ds_f32f0b30-b7e1-40f9-ba6a-9804a5b9d635'; // Replace with your actual dashboard secret
const TOKEN_URL = 'https://semaphor.cloud/api/v1/token';

async function fetchToken() {
  try {
    const response = await fetch(TOKEN_URL, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        dashboardId: DASHBOARD_ID,
        dashboardSecret: DASHBOARD_SECRET,
      }),
    });
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const token = await response.json();
    if (token?.accessToken) {
      setAuthToken(token);
    }
  } catch (error) {
    console.error('There was an error!', error);
  }
}

3) Initialize Dashboard

Here is a simple example of a React component that demonstrates how to use the Dashboard component from the semaphor package. Make sure you import style.css either at the beginning of your component or in your global CSS file. This step is necessary for correctly loading your dashboard styles.

import { useEffect, useState } from 'react';
import { AuthToken, Dashboard } from 'semaphor';
import '../node_modules/semaphor/dist/style.css'; // IMPORTANT! Include the CSS file. This is the default style, you can customize it.

function App() {
  const [authToken, setAuthToken] = useState<AuthToken>();

  return (
    <div>
      <h2>My cool dashboard</h2>
      <Dashboard authToken={authToken} id={DASHBOARD_ID} />
    </div>
  );
}

Full Code

Here is the complete React code that uses the above steps. You can copy and paste this example into your own application.

import { useEffect, useState } from 'react';
import { AuthToken, Dashboard } from 'semaphor';
import '../node_modules/semaphor/dist/style.css'; // IMPORTANT! Include the CSS file. This is the default style, you can customize it.

const DASHBOARD_ID = 'd_cf007a8b-19bc-46ad-8787-2915445b7b86'; // Replace with your actual dashboard ID
const DASHBOARD_SECRET = 'ds_f32f0b30-b7e1-40f9-ba6a-9804a5b9d635'; // Replace with your actual dashboard secret
const TOKEN_URL = 'https://semaphor.cloud/api/v1/token';

function App() {
  const [authToken, setAuthToken] = useState<AuthToken>();

  useEffect(() => {
    async function fetchToken() {
      try {
        const response = await fetch(TOKEN_URL, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            dashboardId: DASHBOARD_ID,
            dashboardSecret: DASHBOARD_SECRET,
          }),
        });
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const token = await response.json();
        if (token?.accessToken) {
          setAuthToken(token);
        }
      } catch (error) {
        console.error('There was an error!', error);
      }
    }
    fetchToken();
  }, []);

  return (
    <div>
      <h2>My cool dashboard</h2>
      <Dashboard authToken={authToken} id={DASHBOARD_ID} />
    </div>
  );
}

export default App;

Key Considerations

  • Security Note: Keep the DASHBOARD_SECRET secure and do not expose it in client-side code in production. This example is for demonstration purposes only. When deploying in production, obtain the authentication token from a secure, server-side environment.
  • Fetching the AuthToken: Before the dashboard can be displayed, an authentication token must be fetched. The useEffect hook is used to perform this action when the component mounts.
0.0.315

7 months ago

0.0.314

7 months ago

0.0.313

7 months ago

0.0.312

7 months ago

0.0.319

7 months ago

0.0.318

7 months ago

0.0.317

7 months ago

0.0.316

7 months ago

0.0.311

7 months ago

0.0.310

7 months ago

0.0.309

7 months ago

0.0.326

7 months ago

0.0.325

7 months ago

0.0.324

7 months ago

0.0.323

7 months ago

0.0.329

7 months ago

0.0.328

7 months ago

0.0.327

7 months ago

0.0.322

7 months ago

0.0.321

7 months ago

0.0.320

7 months ago

0.0.337

6 months ago

0.0.336

6 months ago

0.0.335

6 months ago

0.0.334

6 months ago

0.0.338

6 months ago

0.0.333

7 months ago

0.0.332

7 months ago

0.0.331

7 months ago

0.0.330

7 months ago

0.0.348

6 months ago

0.0.347

6 months ago

0.0.346

6 months ago

0.0.345

6 months ago

0.0.349

6 months ago

0.0.340

6 months ago

0.0.344

6 months ago

0.0.343

6 months ago

0.0.342

6 months ago

0.0.341

6 months ago

0.0.37710

5 months ago

0.0.37711

5 months ago

0.0.37714

5 months ago

0.0.37715

5 months ago

0.0.37712

5 months ago

0.0.37713

5 months ago

0.0.37718

5 months ago

0.0.37719

5 months ago

0.0.37716

5 months ago

0.0.37717

5 months ago

0.0.304

7 months ago

0.0.303

7 months ago

0.0.302

7 months ago

0.0.301

7 months ago

0.0.308

7 months ago

0.0.307

7 months ago

0.0.306

7 months ago

0.0.305

7 months ago

0.0.300

7 months ago

0.0.3791

5 months ago

0.0.3777

5 months ago

0.0.3771

5 months ago

0.0.3772

5 months ago

0.0.3773

5 months ago

0.0.3774

5 months ago

0.0.3775

5 months ago

0.0.3776

5 months ago

0.0.3931

5 months ago

0.0.3932

5 months ago

0.0.279

9 months ago

0.0.395

5 months ago

0.0.274

9 months ago

0.0.394

5 months ago

0.0.273

9 months ago

0.0.393

5 months ago

0.0.272

9 months ago

0.0.392

5 months ago

0.0.271

9 months ago

0.0.278

9 months ago

0.0.277

9 months ago

0.0.397

5 months ago

0.0.276

9 months ago

0.0.396

5 months ago

0.0.275

9 months ago

0.0.391

5 months ago

0.0.270

9 months ago

0.0.390

5 months ago

0.0.285

9 months ago

0.0.284

9 months ago

0.0.283

9 months ago

0.0.282

9 months ago

0.0.289

8 months ago

0.0.288

9 months ago

0.0.287

9 months ago

0.0.286

9 months ago

0.0.281

9 months ago

0.0.280

9 months ago

0.0.296

7 months ago

0.0.295

7 months ago

0.0.294

7 months ago

0.0.293

7 months ago

0.0.299

7 months ago

0.0.298

7 months ago

0.0.297

7 months ago

0.0.292

8 months ago

0.0.291

8 months ago

0.0.290

8 months ago

0.0.359

6 months ago

0.0.358

6 months ago

0.0.357

6 months ago

0.0.356

6 months ago

0.0.351

6 months ago

0.0.350

6 months ago

0.0.355

6 months ago

0.0.354

6 months ago

0.0.353

6 months ago

0.0.352

6 months ago

0.0.369

5 months ago

0.0.368

5 months ago

0.0.367

5 months ago

0.0.362

5 months ago

0.0.361

5 months ago

0.0.360

6 months ago

0.0.366

5 months ago

0.0.365

5 months ago

0.0.364

5 months ago

0.0.363

5 months ago

0.0.379

5 months ago

0.0.378

5 months ago

0.0.373

5 months ago

0.0.372

5 months ago

0.0.371

5 months ago

0.0.370

5 months ago

0.0.377

5 months ago

0.0.376

5 months ago

0.0.375

5 months ago

0.0.269

9 months ago

0.0.389

5 months ago

0.0.268

9 months ago

0.0.384

5 months ago

0.0.263

9 months ago

0.0.383

5 months ago

0.0.262

9 months ago

0.0.382

5 months ago

0.0.261

9 months ago

0.0.381

5 months ago

0.0.388

5 months ago

0.0.267

9 months ago

0.0.387

5 months ago

0.0.266

9 months ago

0.0.386

5 months ago

0.0.265

9 months ago

0.0.385

5 months ago

0.0.264

9 months ago

0.0.380

5 months ago

0.0.249

10 months ago

0.0.248

10 months ago

0.0.247

10 months ago

0.0.259

10 months ago

0.0.258

10 months ago

0.0.257

10 months ago

0.0.252

10 months ago

0.0.251

10 months ago

0.0.250

10 months ago

0.0.256

10 months ago

0.0.255

10 months ago

0.0.254

10 months ago

0.0.253

10 months ago

0.0.260

10 months ago

0.0.246

10 months ago

0.0.205

11 months ago

0.0.204

11 months ago

0.0.203

11 months ago

0.0.202

11 months ago

0.0.209

11 months ago

0.0.208

11 months ago

0.0.207

11 months ago

0.0.206

11 months ago

0.0.201

11 months ago

0.0.200

11 months ago

0.0.216

11 months ago

0.0.215

11 months ago

0.0.214

11 months ago

0.0.213

11 months ago

0.0.219

10 months ago

0.0.218

10 months ago

0.0.217

10 months ago

0.0.212

11 months ago

0.0.211

11 months ago

0.0.210

11 months ago

0.0.227

10 months ago

0.0.226

10 months ago

0.0.225

10 months ago

0.0.224

10 months ago

0.0.229

10 months ago

0.0.228

10 months ago

0.0.223

10 months ago

0.0.222

10 months ago

0.0.221

10 months ago

0.0.220

10 months ago

0.0.197

11 months ago

0.0.196

12 months ago

0.0.195

12 months ago

0.0.194

12 months ago

0.0.199

11 months ago

0.0.198

11 months ago

0.0.193

12 months ago

0.0.192

12 months ago

0.0.191

12 months ago

0.0.190

12 months ago

0.0.186

12 months ago

0.0.185

12 months ago

0.0.184

12 months ago

0.0.189

12 months ago

0.0.188

12 months ago

0.0.187

12 months ago

0.0.238

10 months ago

0.0.237

10 months ago

0.0.236

10 months ago

0.0.235

10 months ago

0.0.239

10 months ago

0.0.230

10 months ago

0.0.234

10 months ago

0.0.233

10 months ago

0.0.232

10 months ago

0.0.231

10 months ago

0.0.241

10 months ago

0.0.240

10 months ago

0.0.245

10 months ago

0.0.244

10 months ago

0.0.243

10 months ago

0.0.242

10 months ago

0.0.159

1 year ago

0.0.158

1 year ago

0.0.153

1 year ago

0.0.152

1 year ago

0.0.151

1 year ago

0.0.150

1 year ago

0.0.157

1 year ago

0.0.156

1 year ago

0.0.155

1 year ago

0.0.154

1 year ago

0.0.169

1 year ago

0.0.164

1 year ago

0.0.163

1 year ago

0.0.162

1 year ago

0.0.161

1 year ago

0.0.168

1 year ago

0.0.167

1 year ago

0.0.166

1 year ago

0.0.165

1 year ago

0.0.160

1 year ago

0.0.175

12 months ago

0.0.174

1 year ago

0.0.173

1 year ago

0.0.172

1 year ago

0.0.179

12 months ago

0.0.178

12 months ago

0.0.177

12 months ago

0.0.176

12 months ago

0.0.171

1 year ago

0.0.170

1 year ago

0.0.106

1 year ago

0.0.105

1 year ago

0.0.104

1 year ago

0.0.103

1 year ago

0.0.109

1 year ago

0.0.108

1 year ago

0.0.107

1 year ago

0.0.183

12 months ago

0.0.102

1 year ago

0.0.101

1 year ago

0.0.182

12 months ago

0.0.181

12 months ago

0.0.180

12 months ago

0.0.117

1 year ago

0.0.116

1 year ago

0.0.115

1 year ago

0.0.114

1 year ago

0.0.119

1 year ago

0.0.118

1 year ago

0.0.113

1 year ago

0.0.112

1 year ago

0.0.111

1 year ago

0.0.110

1 year ago

0.0.128

1 year ago

0.0.127

1 year ago

0.0.126

1 year ago

0.0.125

1 year ago

0.0.129

1 year ago

0.0.120

1 year ago

0.0.124

1 year ago

0.0.123

1 year ago

0.0.122

1 year ago

0.0.121

1 year ago

0.0.139

1 year ago

0.0.138

1 year ago

0.0.137

1 year ago

0.0.136

1 year ago

0.0.131

1 year ago

0.0.130

1 year ago

0.0.135

1 year ago

0.0.134

1 year ago

0.0.133

1 year ago

0.0.132

1 year ago

0.0.149

1 year ago

0.0.96

1 year ago

0.0.148

1 year ago

0.0.97

1 year ago

0.0.147

1 year ago

0.0.98

1 year ago

0.0.99

1 year ago

0.0.142

1 year ago

0.0.141

1 year ago

0.0.140

1 year ago

0.0.146

1 year ago

0.0.145

1 year ago

0.0.144

1 year ago

0.0.143

1 year ago

0.0.95

1 year ago

0.0.90

1 year ago

0.0.91

1 year ago

0.0.92

1 year ago

0.0.93

1 year ago

0.0.94

1 year ago

0.0.88

1 year ago

0.0.89

1 year ago

0.0.84

1 year ago

0.0.85

1 year ago

0.0.86

1 year ago

0.0.87

1 year ago

0.0.83

1 year ago

0.0.82

1 year ago

0.0.80

1 year ago

0.0.81

1 year ago

0.0.79

1 year ago

0.0.77

1 year ago

0.0.78

1 year ago

0.0.76

1 year ago

0.0.75

1 year ago

0.0.74

1 year ago

0.0.73

1 year ago

0.0.72

1 year ago

0.0.71

1 year ago

0.0.70

1 year ago

0.0.66

1 year ago

0.0.67

1 year ago

0.0.68

1 year ago

0.0.69

1 year ago

0.0.64

1 year ago

0.0.65

1 year ago

0.0.63

1 year ago

0.0.62

1 year ago

0.0.60

1 year ago

0.0.61

1 year ago

0.0.59

1 year ago

0.0.53

1 year ago

0.0.54

1 year ago

0.0.55

1 year ago

0.0.56

1 year ago

0.0.57

1 year ago

0.0.58

1 year ago

0.0.51

1 year ago

0.0.52

1 year ago

0.0.50

1 year ago

0.0.49

1 year ago

0.0.46

1 year ago

0.0.47

1 year ago

0.0.2

1 year ago

0.0.48

1 year ago

0.0.40

1 year ago

0.0.41

1 year ago

0.0.42

1 year ago

0.0.43

1 year ago

0.0.45

1 year ago

0.0.37

1 year ago

0.0.38

1 year ago

0.0.39

1 year ago

0.0.36

1 year ago

0.0.35

1 year ago

0.0.32

1 year ago

0.0.33

1 year ago

0.0.34

1 year ago

0.0.30

2 years ago

0.0.31

2 years ago

0.0.26

2 years ago

0.0.27

2 years ago

0.0.28

2 years ago

0.0.29

2 years ago

0.0.20

2 years ago

0.0.21

2 years ago

0.0.22

2 years ago

0.0.23

2 years ago

0.0.24

2 years ago

0.0.25

2 years ago

0.0.19

2 years ago

0.0.18

2 years ago

0.0.17

2 years ago

0.0.16

2 years ago

0.0.15

2 years ago

0.0.14

2 years ago

0.0.13

2 years ago

0.0.12

2 years ago

0.0.11

2 years ago

0.0.10

2 years ago

0.0.1

2 years ago

0.0.0

2 years ago