0.0.397 • Published 7 months ago

react-semaphor v0.0.397

Weekly downloads
-
License
MIT
Repository
-
Last release
7 months 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

9 months ago

0.0.314

9 months ago

0.0.313

9 months ago

0.0.312

9 months ago

0.0.319

9 months ago

0.0.318

9 months ago

0.0.317

9 months ago

0.0.316

9 months ago

0.0.311

9 months ago

0.0.310

9 months ago

0.0.309

9 months ago

0.0.326

9 months ago

0.0.325

9 months ago

0.0.324

9 months ago

0.0.323

9 months ago

0.0.329

9 months ago

0.0.328

9 months ago

0.0.327

9 months ago

0.0.322

9 months ago

0.0.321

9 months ago

0.0.320

9 months ago

0.0.337

9 months ago

0.0.336

9 months ago

0.0.335

9 months ago

0.0.334

9 months ago

0.0.338

9 months ago

0.0.333

9 months ago

0.0.332

9 months ago

0.0.331

9 months ago

0.0.330

9 months ago

0.0.348

9 months ago

0.0.347

9 months ago

0.0.346

9 months ago

0.0.345

9 months ago

0.0.349

8 months ago

0.0.340

9 months ago

0.0.344

9 months ago

0.0.343

9 months ago

0.0.342

9 months ago

0.0.341

9 months ago

0.0.37710

8 months ago

0.0.37711

8 months ago

0.0.37714

8 months ago

0.0.37715

8 months ago

0.0.37712

8 months ago

0.0.37713

8 months ago

0.0.37718

8 months ago

0.0.37719

8 months ago

0.0.37716

8 months ago

0.0.37717

8 months ago

0.0.304

9 months ago

0.0.303

9 months ago

0.0.302

9 months ago

0.0.301

9 months ago

0.0.308

9 months ago

0.0.307

9 months ago

0.0.306

9 months ago

0.0.305

9 months ago

0.0.300

9 months ago

0.0.3791

8 months ago

0.0.3777

8 months ago

0.0.3771

8 months ago

0.0.3772

8 months ago

0.0.3773

8 months ago

0.0.3774

8 months ago

0.0.3775

8 months ago

0.0.3776

8 months ago

0.0.3931

7 months ago

0.0.3932

7 months ago

0.0.279

11 months ago

0.0.395

7 months ago

0.0.274

12 months ago

0.0.394

7 months ago

0.0.273

12 months ago

0.0.393

7 months ago

0.0.272

12 months ago

0.0.392

7 months ago

0.0.271

12 months ago

0.0.278

11 months ago

0.0.277

12 months ago

0.0.397

7 months ago

0.0.276

12 months ago

0.0.396

7 months ago

0.0.275

12 months ago

0.0.391

7 months ago

0.0.270

12 months ago

0.0.390

7 months ago

0.0.285

11 months ago

0.0.284

11 months ago

0.0.283

11 months ago

0.0.282

11 months ago

0.0.289

10 months ago

0.0.288

11 months ago

0.0.287

11 months ago

0.0.286

11 months ago

0.0.281

11 months ago

0.0.280

11 months ago

0.0.296

10 months ago

0.0.295

10 months ago

0.0.294

10 months ago

0.0.293

10 months ago

0.0.299

9 months ago

0.0.298

9 months ago

0.0.297

9 months ago

0.0.292

10 months ago

0.0.291

10 months ago

0.0.290

10 months ago

0.0.359

8 months ago

0.0.358

8 months ago

0.0.357

8 months ago

0.0.356

8 months ago

0.0.351

8 months ago

0.0.350

8 months ago

0.0.355

8 months ago

0.0.354

8 months ago

0.0.353

8 months ago

0.0.352

8 months ago

0.0.369

8 months ago

0.0.368

8 months ago

0.0.367

8 months ago

0.0.362

8 months ago

0.0.361

8 months ago

0.0.360

8 months ago

0.0.366

8 months ago

0.0.365

8 months ago

0.0.364

8 months ago

0.0.363

8 months ago

0.0.379

8 months ago

0.0.378

8 months ago

0.0.373

8 months ago

0.0.372

8 months ago

0.0.371

8 months ago

0.0.370

8 months ago

0.0.377

8 months ago

0.0.376

8 months ago

0.0.375

8 months ago

0.0.269

12 months ago

0.0.389

7 months ago

0.0.268

12 months ago

0.0.384

8 months ago

0.0.263

12 months ago

0.0.383

8 months ago

0.0.262

12 months ago

0.0.382

8 months ago

0.0.261

12 months ago

0.0.381

8 months ago

0.0.388

8 months ago

0.0.267

12 months ago

0.0.387

8 months ago

0.0.266

12 months ago

0.0.386

8 months ago

0.0.265

12 months ago

0.0.385

8 months ago

0.0.264

12 months ago

0.0.380

8 months ago

0.0.249

12 months ago

0.0.248

12 months ago

0.0.247

12 months ago

0.0.259

12 months ago

0.0.258

12 months ago

0.0.257

12 months ago

0.0.252

12 months ago

0.0.251

12 months ago

0.0.250

12 months ago

0.0.256

12 months ago

0.0.255

12 months ago

0.0.254

12 months ago

0.0.253

12 months ago

0.0.260

12 months ago

0.0.246

12 months ago

0.0.205

1 year ago

0.0.204

1 year ago

0.0.203

1 year ago

0.0.202

1 year ago

0.0.209

1 year ago

0.0.208

1 year ago

0.0.207

1 year ago

0.0.206

1 year ago

0.0.201

1 year ago

0.0.200

1 year ago

0.0.216

1 year ago

0.0.215

1 year ago

0.0.214

1 year ago

0.0.213

1 year ago

0.0.219

1 year ago

0.0.218

1 year ago

0.0.217

1 year ago

0.0.212

1 year ago

0.0.211

1 year ago

0.0.210

1 year ago

0.0.227

1 year ago

0.0.226

1 year ago

0.0.225

1 year ago

0.0.224

1 year ago

0.0.229

1 year ago

0.0.228

1 year ago

0.0.223

1 year ago

0.0.222

1 year ago

0.0.221

1 year ago

0.0.220

1 year ago

0.0.197

1 year ago

0.0.196

1 year ago

0.0.195

1 year ago

0.0.194

1 year ago

0.0.199

1 year ago

0.0.198

1 year ago

0.0.193

1 year ago

0.0.192

1 year ago

0.0.191

1 year ago

0.0.190

1 year ago

0.0.186

1 year ago

0.0.185

1 year ago

0.0.184

1 year ago

0.0.189

1 year ago

0.0.188

1 year ago

0.0.187

1 year ago

0.0.238

1 year ago

0.0.237

1 year ago

0.0.236

1 year ago

0.0.235

1 year ago

0.0.239

1 year ago

0.0.230

1 year ago

0.0.234

1 year ago

0.0.233

1 year ago

0.0.232

1 year ago

0.0.231

1 year ago

0.0.241

1 year ago

0.0.240

1 year ago

0.0.245

1 year ago

0.0.244

1 year ago

0.0.243

1 year ago

0.0.242

1 year 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

1 year ago

0.0.174

1 year ago

0.0.173

1 year ago

0.0.172

1 year ago

0.0.179

1 year ago

0.0.178

1 year ago

0.0.177

1 year ago

0.0.176

1 year 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

1 year ago

0.0.102

1 year ago

0.0.101

1 year ago

0.0.182

1 year ago

0.0.181

1 year ago

0.0.180

1 year 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

2 years ago

0.0.75

2 years ago

0.0.74

2 years ago

0.0.73

2 years ago

0.0.72

2 years ago

0.0.71

2 years ago

0.0.70

2 years ago

0.0.66

2 years ago

0.0.67

2 years ago

0.0.68

2 years ago

0.0.69

2 years ago

0.0.64

2 years ago

0.0.65

2 years ago

0.0.63

2 years ago

0.0.62

2 years ago

0.0.60

2 years ago

0.0.61

2 years ago

0.0.59

2 years ago

0.0.53

2 years ago

0.0.54

2 years ago

0.0.55

2 years ago

0.0.56

2 years ago

0.0.57

2 years ago

0.0.58

2 years ago

0.0.51

2 years ago

0.0.52

2 years ago

0.0.50

2 years ago

0.0.49

2 years ago

0.0.46

2 years ago

0.0.47

2 years ago

0.0.2

2 years ago

0.0.48

2 years ago

0.0.40

2 years ago

0.0.41

2 years ago

0.0.42

2 years ago

0.0.43

2 years ago

0.0.45

2 years ago

0.0.37

2 years ago

0.0.38

2 years ago

0.0.39

2 years ago

0.0.36

2 years ago

0.0.35

2 years ago

0.0.32

2 years ago

0.0.33

2 years ago

0.0.34

2 years 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